否定的数字变量和在LessCSS添加“PX”到它(Negate a numerical variab

我想创建一个函数，它执行以下操作：

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

我想传递一个正的值，在@x和@y然后在输出否定他们。 上述LESS函数输出用于下面的示例以下：

//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 。 有没有什么办法，人们可以删除这一点，并达到我想要的？

我想该行的输出为： background: url('/Content/images/sprites.png') no-repeat -312px -0px;

Answer 1:

仅仅通过乘以1在你想要的符号和单位。 所以：

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

Answer 2:

你也可以试试这个：

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

文章来源: Negate a numerical variable and add 'px' to it in LessCSS