对数值变量求反,并在LessCSS中添加"px" [英] Negate a numerical variable and add 'px' to it in LessCSS
问题描述
我想创建一个执行以下操作的函数:
I would like to create a function which does the following:
.sprite-size (@width,@height,@x,@y) {
width:~'@{width}px';
height:~'@{height}px';
background: @sprites no-repeat -~'@{x}px' -~'@{y}px';
}
我想在@x
和@y
中传递一个正值,然后在输出中取反.上面的LESS函数为以下示例输出以下内容:
I would like to pass a postive value, in @x
and @y
and then negate them in the output. The above LESS function outputs the following for the following example:
//LESS
.header-language-selection {
.sprite-size(44,21,312,0);
}
//Outputs CSS
.header-language-selection {
width: 44px;
height: 21px;
background: url('/Content/images/sprites.png') no-repeat - 312px - 0px;
}
如您所见,输出结果在-
和px
之间包含一个空格.有什么办法可以消除这一点并实现我想要的?
As you can see the output result includes a space between the -
and the px
. Is there any way where one can remove this and achieve what I want?
我希望该行的输出为:background: url('/Content/images/sprites.png') no-repeat -312px -0px;
I want the output of that line to be: background: url('/Content/images/sprites.png') no-repeat -312px -0px;
推荐答案
只需将所需符号和单位乘以1
.所以:
Just multiply by 1
in the sign and units you want. So:
.sprite-size(@width, @height, @x, @y) {
width: @width*1px;
height: @height*1px;
background: @sprites no-repeat @x*-1px @y*-1px;
}
这篇关于对数值变量求反,并在LessCSS中添加"px"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!