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

Question

我将计算从百分比到像素的某些元素的宽度，因此我将通过使用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()

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);这就是你要找的。您可能希望查看此链接以寻求任何进一步的帮助

Answer 3

或者，您可以像这样使用边距属性：

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

Answer 4

试试这个 ：

width:auto;
margin-right:50px;