Отмените числовую переменную и добавьте 'px' к ней в LessCSS

Я хотел бы создать функцию, которая делает следующее:

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

Я хотел бы передать значение postive в @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;

Ответ 1

Просто увеличивайте на 1 знак и единицы, которые вы хотите. Итак:

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

Ответ 2

Вы также можете попробовать следующее:

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