计算从LESS CSS中的百分比到像素减去像素的宽度 [英] Calculating width from percent to pixel then minus by pixel in LESS CSS

问题描述

我会计算一些元素的宽度，从百分比到像素，所以我将减去-10px通过使用LESS。可能吗？

I will calculate width in some element from percent to pixel so I will minus -10px via using LESS. It´s possible?

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

例如：if 100％= 500px so width = 490px（500-10）;

Ex : if 100% = 500px so width = 490px (500-10);

我做了一个测试演示： http://jsfiddle.net/4DujZ/55/

I made a demo for testing : http://jsfiddle.net/4DujZ/55/

所以padding会说： 5 （10px / 2）。

so padding will say: 5 (10px / 2) all the time when I resizing.

我可以在LESS中做吗？我知道如何在jQuery和简单的CSS像边距填充或...但我会尝试做功能在LESS与 calc（）

Can I do it in LESS ? I know how to do in jQuery and simple CSS like margin padding or else... but i will try to do functional in LESS with calc()

推荐答案

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

You can escape the calc arguments in order to prevent them from being evaluated on compilation.

使用你的例子，你只需要包围参数，如下：

Using your example, you would simply surround the arguments, like this:

calc(~'100% - 10px')

演示： http://jsfiddle.net/c5aq20b6/

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

I find that I use this in one of the following three ways:

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

Everything inside the calc arguments is defined as a string, and is totally static until it's evaluated by the client:

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

CSS输出

b $ b

CSS Output

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

变量插值

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

Interpolation of Variables

You can insert a LESS variable into the string:

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

CSS输出

b $ b

CSS Output

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

混合转义和编译的值

您可能想要转义百分比值，但请在汇编时评估一下：

Mixing Escaped and Compiled Values

You may want to escape a percentage value, but go ahead and evaluate something on compilation:

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

CSS输出

b $ b

CSS Output

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

资料来源：http://lesscss.org/functions/#string-functions-escape 。

这篇关于计算从LESS CSS中的百分比到像素减去像素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！