CODEWITHSUNDEEP
csslesspixel
l2aelba
l2aelba

Reputation: 22217

Calculating width from percent to pixel then minus by pixel in LESS CSS

I will calculate width in some element from percent to pixel so I will minus -10px via using LESS and calc(). It´s possible?

div {
    span {
        width:calc(100% - 10px);
    }
}

I using CSS3 calc() so it doesn't work: calc(100% - 10px)

Example: if 100% = 500px so width = 490px (500-10);

I made a demo for testing : http://jsfiddle.net/4DujZ/55/

so padding will say: 5 (10px / 2) all the time when I resizing.

Can I do it in LESS? I know how to do in jQuery and simple CSS like margin padding or else... but i will try to do functional in LESS with calc()

Upvotes: 105

Views: 123182

Answers (4)

natchiketa
natchiketa

Reputation: 5897

You can escape the calc arguments in order to prevent them from being evaluated on compilation.

Using your example, you would simply surround the arguments, like this: 

calc(~'100% - 10px')

Demo : http://jsfiddle.net/c5aq20b6/

I find that I use this in one of the following three ways:

Basic Escaping

Everything inside the calc arguments is defined as a string, and is totally static until it's evaluated by the client:

LESS Input

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

CSS Output

div > span {
  width: calc(100% - 10px);
}

Interpolation of Variables

You can insert a LESS variable into the string:

LESS Input

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

CSS Output

div > span {
  width: calc(100% - 10px);
}

Mixing Escaped and Compiled Values

You may want to escape a percentage value, but go ahead and evaluate something on compilation:

LESS Input

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

CSS Output

div > span {
  width: calc((100% - 10px) - 80px);
}

Source: http://lesscss.org/functions/#string-functions-escape.

Upvotes: 260

user1552559
user1552559

Reputation: 1

Try this :

width:auto;
margin-right:50px;

Upvotes: -3

Akshay Khandelwal
Akshay Khandelwal

Reputation: 1570

I think width: -moz-calc(25% - 1em); is what you are looking for. And you may want to give this Link a look for any further assistance

Upvotes: 0

THeBAckwardss
THeBAckwardss

Reputation: 27

Or, you could use the margin attribute like this:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Upvotes: -3

Related Questions