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

【问题标题】：Calculating width from percent to pixel then minus by pixel in LESS CSS在LESS CSS中计算从百分比到像素的宽度，然后按像素减去
【发布时间】：2013-01-26 16:49:09
【问题描述】：

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

【问题讨论】：

作为一般规则，don't style selectors that have no semantics，如div 或span。
这是我为在任何 css 属性上使用 calc 编写的跨浏览器 mixin：stackoverflow.com/a/24790931/916734

标签： css less pixel

【解决方案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。

【讨论】：

你摇滚，伙计！感谢您提供这些示例和解释。你知道我如何使用 LESS 将一个未知宽度的容器（我们称之为 div.categories）分成 4 个相等的部分吗？
@ShawnSpencer：在字里行间，有很多晦涩难懂的地方。您可以创建一个 JSFiddle 来说明您要解决的问题吗？我可以尝试猜测用例，但由于不知道全部细节而受到抑制，我相信你知道这是怎么回事——你最糟糕的抑制最终会让你精神崩溃。
我不倾向于辞职到成熟。由于我正在寻求一个简单的 CSS 解决方案，并且由于我能够使用其中一个答案使事情正常进行，所以我现在很好。不过，感谢您提供查看 JSFiddle 示例。非常感谢。

【解决方案2】：

试试这个：

width:auto;
margin-right:50px;

【讨论】：

【解决方案3】：

我认为width: -moz-calc(25% - 1em); 是您正在寻找的。您可能想给这个Link 寻找任何进一步的帮助

【讨论】：

【解决方案4】：

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

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

【讨论】：

OP 希望宽度小于 100% 宽度 10px。您的 CSS 不会那样做。它将使其宽超过 100%。