从百分比计算宽度转换为像素，然后在LESS CSS中减去像素

Question

我想把某个元素的宽度从百分比转换成像素，所以我想通过使用LESS和calc()减少10像素。这可行吗？

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

我使用CSS3的calc()，但它不起作用：calc(100% - 10px)

例如：如果100％= 500像素，则宽度为490像素（500-10）;

我已经制作了一个演示来进行测试：http://jsfiddle.net/4DujZ/55/

因此，当我调整大小时，填充将始终显示5（10像素/2）。

我能在LESS中做到吗？ 我知道如何在jQuery和简单的CSS中进行操作，例如margin padding或其他...但是我将尝试使用calc()在LESS中实现功能。

- l2aelba

---

一般来说，不要为没有语义的选择器（如div或span）设置样式。参考链接：http://smacss.com/book/type-module#avoid - Pavlo

这是我编写的一个跨浏览器mixin，用于在任何CSS属性上使用calc：https://dev59.com/questions/UGMm5IYBdhLWcg3wDrtR#24790931 - Patrick Berkeley

Answer 1

为了防止编译时对calc参数的求值，你可以进行转义。

以你的例子为例，你只需像这样将参数括起来：

calc(~'100% - 10px')

示例: http://jsfiddle.net/c5aq20b6/

---

我发现我在以下三种方式中使用它:

基本转义

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

LESS 输入

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

CSS 输出

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

变量的插值

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

LESS输入

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

CSS输出

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

混合转义和编译值

您可能希望转义百分比值，但仍要在编译时评估某些内容：

LESS输入

@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。

- natchiketa

---

你太棒了，伙计！感谢你提供的那些示例和解释。你知道我怎么能够使用LESS将一个未知宽度的容器（我们称之为div.categories）平均分成4个部分吗？ - Shawn Spencer

@ShawnSpencer: "在这些字里面，有很多含糊不清的地方。你能否创建一个JSFiddle来说明你想要解决什么问题？我可以试着猜测用途，但是由于不知道全部细节而受到限制，你应该知道怎么回事——你最坏的担忧往往会在最后让你灰心丧气。" - natchiketa

我不倾向于接受成熟。由于我正在采用简单的CSS解决方案，而且我能够使用其中一个答案使事情正常工作，所以现在我很好。谢谢您提供JSFiddle示例的帮助。非常感激。 - Shawn Spencer

Answer 2

我认为width: -moz-calc(25% - 1em);是你要找的。 同时，你可能想看一下链接以获取更进一步的帮助。

- Akshay Khandelwal

Answer 3

试试这个：

width:auto;
margin-right:50px;

- user1552559

Answer 4

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

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

- THeBAckwardss

---

OP希望宽度比100%的宽度小10像素。您的CSS并没有达到这个效果，反而会使它比100%更宽。 - Andrew Barber