使用更少的值将所有参数值加倍

debugcn 发表于 Dev

贝贝纳尔

我正在写很多代码，例如

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

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

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

哈利

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

更少：（适用于支持将规则集传递到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演示

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

您可以通过创建具有所有常用属性的mixin并使该mixin也将amultiplier作为一个参数来实现此目的。

.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演示

通过将适当的乘数值设置为输入参数来调用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;
    }
}