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

Question

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

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

我使用 CSS3 calc() 所以它不起作用:calc(100% - 10px)

Example: if 100% = 500px so width = 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 .