Question

我正在尝试在一些设置为药丸的\元素上设置填充，我想动态更改填充。我知道我能做到：

@pill-padding-v: 8px;
@pill-padding-h: 15px;

padding:@pill-padding-v @pill-padding-h;

渲染这个 - 似乎工作正常：

padding:8px 15px;

但是我怎么能少加1px的填充？

@pill-padding-v: 8;
@pill-padding-h: 15;

@pill-padding-v: (@pill-padding-v + 1)
@pill-padding-h: (@pill-padding-h + 1)

padding:@pill-padding-vpx @pill-padding-hpx;

主要的探针似乎是添加“px”作为变量名称的一部分我收到编译错误。另外我认为使用8 px代替8px在语法上是不正确的，这似乎也会在浏览器中出现。

如何将像素宽度值乘以LESS Css？

Answer 1

将px添加到变量是正确的，这是正确的。我实际上尝试了插值语法并没有帮助，但你应该在变量（px，em，% ...）中指定单位，就像在你的第一个工作实例。

你说“倍增”，但我认为你的意思是“添加”。应该没有任何问题，试试这个：

@pill-padding-v: 8px;
@pill-padding-h: 15px;

@pill-padding-v: (@pill-padding-v + 1);
@pill-padding-h: (@pill-padding-h + 1);

element {
    padding:@pill-padding-v @pill-padding-h;
}

输出应为：

element { padding:9px 16px; }

...虽然，您可能只想使用另一个变量名称或在样式声明中添加1px。我不认为重新声明变量是一种好的做法，并且实际上对它起作用感到惊讶。

Answer 2

除了添加，您可以使用LESS执行任何数学计算：

@pill-padding-v: 8;
@pill-padding-h: 15;

element {
/* the numbers I'm multiplying by are arbitrary,
but the value defined in the LESS variable will append
the unit that you multiply it by. */
padding: calc(@pill-padding-v * 3px) calc(@pill-padding-h * 2px);
}

少输出：

element {
   padding:calc(24px) calc(30px);
}

即使它包含在calc函数中，也没关系，因为没有数学运算符的“等式”的结果无论如何都是该值。

用户七阶段 - 最高提供了一个好点：您不需要LESS中的calc()功能。它可以写成LESS：

element {
   padding: (@pill-padding-v * 3px) (@pill-padding-h * 2px);
}

如何将像素宽度值乘以LESS Css？

2 个答案: