Zaneguj zmienną liczbową i dodać „px” do niego w LessCSS

Question

Chciałbym utworzyć funkcję, która wykonuje następujące operacje:

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

Chciałabym przekazać wartość pozytywnej informacje, w @x i @y a następnie negować je w wynikach. Powyższy MNIEJ funkcja wyprowadza następujące na poniższym przykładzie:

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

Jak widać wynik wyjściowy zawiera przestrzeń pomiędzy - i px. Czy istnieje sposób, aby usunąć to i osiągnąć to, czego chcę?

Chcę wyjście z tej linii będzie: background: url('/Content/images/sprites.png') no-repeat -312px -0px;

Answer 1

Wystarczy pomnożyć przez 1 w znak i jednostek chcesz. Więc:

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

Answer 2

Możesz też spróbować:

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