在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),当我调整大小时.

我能做到这一点在LESS？我知道如何在jQuery和简单的CSS像保证金填充或做别的......但我会努力做到功能在LESS与calc()

Answer 1

您可以转义calc参数,以防止在编译时对它们进行求值.

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

calc(~'100% - 10px')

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

基本逃脱

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

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

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

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

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

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

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

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

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

@ShawnSpencer:在两行之间,有很多默默无闻.你能创建一个JSFiddle来说明你想要解决的问题吗？我可以尝试猜测用例,但是我不知道详细信息会让我受到抑制,而且我确定你知道这是怎么回事 - 你最糟糕的抑制因素最终会让你心烦意乱. (5认同)
你摇滚，伙计！感谢您提供这些示例和说明。您是否偶然知道如何使用LESS将容器的未知宽度（我们称为div.categories）分成4个相等的部分？ (2认同)
我不倾向于辞职。因为我要一个简单的CSS解决方案，并且由于我能够使用其中的一种答案来使事情正常进行，所以我现在很擅长。不过，感谢您提供查看JSFiddle示例的信息。非常感激。 (2认同)