LESS:混合用于精灵中的背景位置.同时实现背景大小

Question

我做了一个简单的mixin，它可以帮助我在水平精灵中生成背景位置坐标

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

有什么帮助吗？我需要一些复杂的混合和计算以及条件语句的良好来源

Answer 1

肯定有多种方法可以制作更有趣的混音。上面的例子可以像这样转换为 LESS 代码，例如：

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

我做了一个单独的 mixin .bgw，如果参数与 1 不同，它会添加 background-size 属性，否则它什么也不做。您也可以改用警卫。希望这能给你一些想法。

作为良好的资源...我会说最广泛的是 lesscss.org 的文档，它为您提供了功能的概述。除此之外，我发现在SO上查找/翻转/搜索答案是所有可能的非常好想法的宝贵来源（有时您会在LESS中找到针对相当复杂问题的非常聪明和令人兴奋的解决方案的示例）。