在 LESS CSS 中计算从百分比到像素然后减去像素的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14814616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calculating width from percent to pixel then minus by pixel in LESS CSS
提问by l2aelba
I will calculate width in some element from percent to pixel so I will minus -10px via using LESSand calc(). It′s possible?
我将从百分比到像素计算某些元素的宽度，因此我将通过使用LESS和calc()减去 -10px 。这是可能的？
div {
span {
width:calc(100% - 10px);
}
}
I using CSS3 calc()so it doesn't work: calc(100% - 10px)
我使用 CSS3calc()所以它不起作用：calc(100% - 10px)
Example:if 100% = 500px so width = 490px (500-10);
示例：如果 100% = 500px 那么宽度 = 490px (500-10);
I made a demo for testing : http://jsfiddle.net/4DujZ/55/
我做了一个测试演示：http: //jsfiddle.net/4DujZ/55/
so padding will say: 5(10px / 2) all the time when I resizing.
所以当我调整大小时，padding 会一直说：5(10px / 2)。
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 LESSwith calc()
我可以用LESS做吗？我知道如何在 jQuery 和简单的 CSS 中进行操作，例如边距填充或其他...但我会尝试在LESS 中使用calc()
回答by natchiketa
You can escape the calcarguments in order to prevent them from being evaluated on compilation.
您可以转义calc参数以防止它们在编译时被评估。
Using your example, you would simply surround the arguments, like this:
使用您的示例，您只需将参数括起来，如下所示：
calc(~'100% - 10px')
Demo : http://jsfiddle.net/c5aq20b6/
演示：http: //jsfiddle.net/c5aq20b6/
I find that I use this in one of the following three ways:
我发现我以以下三种方式之一使用它：
Basic Escaping
基本转义
Everything inside the calcarguments is defined as a string, and is totally static until it's evaluated by the client:
calc参数中的所有内容都定义为字符串，并且在客户端对其进行评估之前是完全静态的：
LESS Input
少输入
div {
> span {
width: calc(~'100% - 10px');
}
}
CSS Output
CSS 输出
div > span {
width: calc(100% - 10px);
}
Interpolation of Variables
变量插值
You can insert a LESS variable into the string:
您可以在字符串中插入一个 LESS 变量：
LESS Input
少输入
div {
> span {
@pad: 10px;
width: calc(~'100% - @{pad}');
}
}
CSS Output
CSS 输出
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
CSS 输出
div > span {
width: calc((100% - 10px) - 80px);
}
Source: http://lesscss.org/functions/#string-functions-escape.
回答by Akshay Khandelwal
回答by THeBAckwardss
Or, you could use the margin attribute like this:
或者，您可以像这样使用 margin 属性：
{
background:#222;
width:100%;
height:100px;
margin-left: 10px;
margin-right: 10px;
display:block;
}
回答by user1552559
Try this :
尝试这个 ：
width:auto;
margin-right:50px;
