否定數值變量和在LessCSS

Question

添加「PX」到它，我想創建一個函數，它執行以下操作：

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