LESS：MIXIN在精靈後臺位置...實施背景大小以及

Question

我做了一個簡單的混入，可以幫助我產生水平精靈

.bg_h_pos(@ind, @width){ 
    @left: -((@ind - 1) * @width); 
    background-position: ~"@{left}px" 0px; 
} 

作品真棒背景位置座標

@icon_width: 50; 
.icon1{ 
    .bg_h_pos(1, @icon_width); 
} 
.icon2{ 
    .bg_h_pos(2, @icon_width); 
} 

... 

現在我想添加一點複雜性和實現背景大小。

.bg_h_pos(@ind, @width, @background-size: auto){ 
    @left: -((@ind - 1) * @width); 
    background-position: ~"@{left}px" 0px; 
} 

我需要的是這樣的......其中，如果設置爲別的背景大小默認爲1 ... （如0.6，0.4等），然後計算新寬度，並設置背景位置

.bg_h_pos(@ind, @width, @background-size: 1){ 
    if (@background-size != 1){ 
     @width = @width * @background-size; 
     background-size: (ORIGINAL_WIDTH * @background-size)px auto; 
    } 

    @left: -((@ind - 1) * @width); 
    background-position: ~"@{left}px" 0px; 
} 

任何幫助？我需要一些複雜的mixin和計算以及條件語句的很好的來源

Answer 1

確實有多種方法可以製作更有趣的mixin。從你上面的例子可以轉化爲更少的代碼是這樣，例如：

@origw: 200; // original width 

.bgw(@s){ 
    background-size: unit(@origw * @s,px) auto; 
} .bgw(1){} 

.bg_h_pos(@ind, @width, @background-size: 1){ 
    .bgw(@background-size); 
    @left: -((@ind - 1) * @width * @background-size); 
    background-position: unit(@left,px) 0px; 
} 

如果我做了一個單獨的混入.bgw，如果參數1不同之處在於增加了background-size財產，否則什麼也不做。您也可以使用警衛。希望這給你一些想法。

作爲良好的資源......我想說的是最廣泛的是在lesscss.org文檔，讓您對功能進行了概述。除此之外，我發現在這裏尋找/翻轉/尋找答案是一個非常好的想法的寶貴來源，有助於找到一切可能（有時您會發現很多聰明和令人興奮的解決方案的例子，以解決LESS中相當複雜的問題）。