loop - Niega una variable numérica y agrega ''px'' a ella en LessCSS

less vs sass

Question

Me gustaría crear una función que haga lo siguiente:

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

Me gustaría pasar un valor @x , en @x y @y y luego @y en la salida. La función MENOS anterior genera lo siguiente para el siguiente ejemplo:

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

Como puede ver, el resultado de la salida incluye un espacio entre - y el px . ¿Hay alguna forma en que uno pueda eliminar esto y lograr lo que quiero?

Quiero que la salida de esa línea sea: background: url(''/Content/images/sprites.png'') no-repeat -312px -0px;

Answer 1

Solo multiplica por 1 en el signo y las unidades que quieras. Asi que:

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

Answer 2

También puedes probar esto:

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