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

我将计算某些元素的宽度，从百分比到像素，因此我将通过使用LESS和calc（）来减去-10px 。这是可能的？

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

我使用CSS3，calc()因此无法正常工作：calc(100% - 10px)

示例：如果100％= 500px，则宽度= 490px（500-10）；

我制作了一个测试示例：http : //jsfiddle.net/4DujZ/55/

因此，在我调整大小时，填充会一直说：5（10px / 2）。

我可以在LESS中做到吗？我知道如何在jQuery和简单的CSS（如边距填充）中进行操作...但是我将尝试在LESS中使用以下功能calc()

您可以转义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。

我想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;