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