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

Question

我将从百分比到像素计算某个元素的宽度，因此我将使用 LESS 和 calc（）减去-10px。有可能吗？

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

我使用CSS3 calc()，因此无效：calc(100% - 10px)

  

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

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

所以当我调整大小时，padding会说： 5 （10px / 2）。

我可以在 LESS 中完成吗？我知道如何在jQuery和简单的CSS中进行边距填充或其他...但我会尝试使用calc()

在 LESS 中执行功能

Answer 1

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

使用您的示例，您只需将参数包围起来，如下所示：

calc(~'100% - 10px')

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

---

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

基本转义

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

少输入

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

CSS输出

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

变量插值

您可以在字符串中插入LESS变量：

少输入

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

CSS输出

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

混合转义和编译值

您可能想要转义百分比值，但请继续评估编译中的内容：

少输入

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

CSS输出

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

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

Answer 2

我认为width: -moz-calc(25% - 1em);正是您所寻找的。 并且您可能想要Link查看任何进一步的帮助

Answer 3

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

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

Answer 4

试试这个：

width:auto;
margin-right:50px;