105

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()

l2aelba
  • 21,591
  • 22
  • 102
  • 138
  • 1
    As a general rule, [don't style selectors that have no semantics](http://smacss.com/book/type-module#avoid), like `div` or `span`. – Pavlo Oct 22 '13 at 19:45
  • 1
    Here's a cross browser mixin I wrote for using calc on any css property: http://stackoverflow.com/a/24790931/916734 – Patrick Berkeley Jul 16 '14 at 21:18

4 Answers4

260

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.

natchiketa
  • 5,867
  • 2
  • 28
  • 25
  • 2
    You rock, dude! Thank you for those examples and explanations. Do you happen to know how I could divide an unkown width of a container (let's call it div.categories) into 4 equal parts, using LESS? – Shawn Spencer Feb 10 '15 at 19:13
  • 5
    @ShawnSpencer: In between the lines, there's a lot of obscurity. Can you create a JSFiddle illustrating what you're trying to solve? I can try to guess the use case, but I'm inhibited by not knowing the full details, and I'm sure you know how that goes—your worst inhibitions tend to psych you out in the end. – natchiketa Feb 12 '15 at 19:18
  • 2
    I'm not inclined to resign to maturity. Since I'm going for a straightforward CSS solution, and since I was able to make things work, using one of the answers, I'm good for now. Thank you for offering to look at a JSFiddle example though. Much appreciated. – Shawn Spencer Feb 17 '15 at 22:34
0

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

Akshay Khandelwal
  • 1,570
  • 11
  • 19
-3

Or, you could use the margin attribute like this:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }
THeBAckwardss
  • 27
  • 4
-3

Try this :

width:auto;
margin-right:50px;
John Slegers
  • 45,213
  • 22
  • 199
  • 169
user1552559
  • 1
  • 1