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中相当复杂的问题）。