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

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函数中,也没关系,因为没有数学运算符的"等式"的结果无论如何都是该值.

用户七阶段最大值提供了一个好点:您不需要calc()LESS中的功能.它可以写成LESS为:

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