使用LESS Css中的公式計算背景位置

Question

我需要通過採用精靈圖像的x和y位置的函數方法，使用LESS Css中的數學公式計算背景位置。我最好的猜測是這樣的，但可惜這是行不通的。

@icon_base: 30px; 
@icon: 24px; 
/*sets the position of the background based on the x and y position order */ 
.icon_position(@x: 1, @y: 1) { 
    @posx: ((#sizes[@icon_base] - #sizes[@icon])/2 + (@x * #sizes[@icon_base])) * -1; 
    @posy: ((#sizes[@icon_base] - #sizes[@icon])/2 + (@y * #sizes[@icon_base])) * -1; 
    background-position: @{posx}px @{posy}px; 
} 

Answer 1

我認爲你的操作中有些東西不被lesscss理解。我改寫了你的操作像這樣：

@icon_base: 30px; 
@icon: 24px; 
/*sets the position of the background based on the x and y position order */ 
.icon_position(@x: 1, @y: 1) { 
    @posx:((@icon_base - @icon)/2 + (@x * @icon_base)) * -1; 
    @posy:((@icon_base - @icon)/2 + (@y * @icon_base)) * -1; 
    background-position:~`"@{posx}"` ~`"@{posy}"`; 
} 

它運行沒有錯誤，默認情況下它輸出：

background-position: -33px -33px;