计算宽度从百分比到像素，然后在LESS CSS中减去像素

我会计算一些元素的宽度，从百分比到像素，所以我会通过使用LESS减去-10px。这是可能的？

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

我在CSS3中使用calc() ，所以它不工作calc(100% - 10px)

例如：如果100％= 500px，那么width = 490px（500-10）;

我做了一个testing演示： http : //jsfiddle.net/4DujZ/55/

所以填充会说： 5 （10px / 2）所有的时候我resize。

我可以less用吗？我知道如何做的jQuery和简单的CSS边缘填充或其他…但我会尽量做function在LESS与calc()

您可以转义calc参数，以防止它们在编译时被评估。

用你的例子，你可以简单地围绕这些参数，像这样：

 calc(~'100% - 10px')

演示： http : //jsfiddle.net/c5aq20b6/

我发现我用以下三种方法之一：

基本逃跑

calc参数中的所有内容都被定义为一个string，并且在客户端评估之前是完全静态的：

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

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

你可以在string中插入一个LESSvariables：

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

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

您可能想要跳过一个百分比值，但请继续评估编译的内容：

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

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

资料来源： http : //lesscss.org/functions/#string-functions-escape 。

我认为width: -moz-calc(25% - 1em); 是你在找什么。你可能想给这个链接寻找任何进一步的帮助

或者，您可以使用这样的margin属性：

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

尝试这个：

 width:auto; margin-right:50px;