在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/

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

我可以少做吗？我知道如何在jQuery和简单的CSS，如边距填充或其他...但我会尝试在LESS与calc()功能

Answer 1

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

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

calc(~'100% - 10px')

但是：ぁzxswい

---

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

基本逃脱

http://jsfiddle.net/c5aq20b6/参数中的所有内容都被定义为字符串，并且在客户端评估之前完全是静态的：

LESS Input

calc

CSS Output

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

变量的插值

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

LESS Input

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

CSS Output

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

混合转义和编译值

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

LESS Input

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

CSS Output

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

资料来源：

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

。

Answer 2

我认为http://lesscss.org/functions/#string-functions-escape正是你要找的。你可能想给这个width: -moz-calc(25% - 1em);寻找任何进一步的帮助

Answer 3

或者，您可以使用如下边距属性：

Link

Answer 4

试试这个 ：

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