Question

我正在编写很多像

这样的代码

.something {
    left: 10px;
    top: 20px;
    @media @tablet {
        left: 20px;
        top: 40px;
    }
}

是否可以将其重构为某些混音？

.something {
    .somemixin({
        left: 10px;
        top: 20px;
    });
}

Answer 1

您可以通过将规则集传递给mixin来实现此目的，并让mixin也将multiplier作为一个参数。

Less （适用于支持将规则集传递给mixins的1.7.0及更高版本）

/* wrapper mixin called with the common rules as a ruleset and a multiplier */
.somemixin(@rules, @multiplier: 1){
    @rules();

    @media tablet{
        .common_props(@rules,2);
    }  
}

/* sub mixin to create rules for each media */
.common_props(@rules,@multiplier){ 
    @rules();
}

.something {
    /* calling wrapper mixin with the ruleset */
    .somemixin({
        left: 10px * @multiplier;
        top: 20px * @multiplier;
        .some-other-class{
            bottom: 1px * @multiplier;
            font-size: 12px * @multiplier;
            padding: 0px 1px * @multiplier;
        }
    });
}

CodePen Demo

Less （对于不支持传递规则集的低于1.7.0的版本）

你可以通过创建一个包含所有常见属性的mixin来实现这一点，并让mixin也将multiplier作为一个参数。

.common_props(@multiplier: 1){
    left: 10px * @multiplier;
    top: 20px * @multiplier;
    .some-other-class{
        bottom: 5px * @multiplier;
        font-size: 12px * @multiplier;
        padding: 0px 1px * @multiplier;
    }
}
.something {
    .common_props();

    @media tablet{
        .common_props(2);
    }
}

CodePen Demo

通过将适当的乘数值设置为输入参数来调用mixin将根据需要生成输出。

由于我们将multiplier的默认值指定为1，因此无需为基本设置传递参数。

已编译的CSS：

.something {
    left: 10px;
    top: 20px;
}
.something .some-other-class {
    bottom: 5px;
    font-size: 12px;
    padding: 0px 1px;
}
@media tablet {
    .something {
        left: 20px;
        top: 40px;
    }
    .something .some-other-class {
        bottom: 10px;
        font-size: 24px;
        padding: 0px 2px;
    }
}

使用less来使所有参数值加倍

1 个答案: