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

有任何帮助吗？我需要一些复杂的mixins和计算以及条件语句的好资源

Answer 1

肯定有多种方法可以让mixin更有趣。您上面的示例可以转换为这样的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上的文档，它为您提供了功能的概述。除此之外，我发现在这里寻找/翻转/搜索答案是一个非常好的想法的宝贵来源，以便尽一切可能（有时候你会找到非常聪明和激动人心的解决方案来解决LESS中相当复杂的问题）。 / p>

LESS：mixin用于sprite中的背景位置......同时实现背景大小

1 个答案: