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';
}

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;
}

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?

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;
}

回答2:

You can also try this:

.sprite-size (@width,@height,@x,@y) {
  width: ~"@{width}px";
  height: ~"@{height}px";
  background: @sprites no-repeat  @x*(-1px)  @y*(-1px);
}

来源：https://stackoverflow.com/questions/14384803/negate-a-numerical-variable-and-add-px-to-it-in-lesscss