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()
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.
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
Or, you could use the margin attribute like this:
{
background:#222;
width:100%;
height:100px;
margin-left: 10px;
margin-right: 10px;
display:block;
}
Try this :
width:auto;
margin-right:50px;
来源:https://stackoverflow.com/questions/14814616/calculating-width-from-percent-to-pixel-then-minus-by-pixel-in-less-css