使用less将所有参数值加倍

我写了很多代码，比如

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

是否有可能将其重构为某种混合

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

---

您可以通过将规则集传递给mixin来实现这一点，并让该mixin也将一个

乘数作为一个参数

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

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



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

您可以通过创建一个具有所有公共属性的mixin来实现这一点，并让该mixin还将一个
乘数
作为一个参数

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


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

由于我们将
乘数的默认值指定为
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;
    }
}

您可以对公共属性使用mixin，并将输入参数作为乘法器。这能满足你的需要吗？我有很多不同的属性。左、上、宽、高、字体大小、边距、填充。在许多课程中，它们有许多组合。基本上，所有带有“px”的东西都应该是平板电脑屏幕大小的两倍。使用这种方法，你应该仍然能够实现它。只要在指定像素值的任何位置使用
*@乘数
。它应该也适用于嵌套类，比如.Yep，你必须在那里放一个乘数：。顺便说一句，如果它真的只是“所有”的两倍，我可能会尝试
transform:scale（2）相反（尽管我想知道如果你尝试
@media@table{body{transform:scale（2）}}
：）会发生什么情况，谢谢，我觉得这很合适。这是相当多的样板代码（必须到处写“*@multiplier”），我认为可能有可能逐个规则解析规则集并修改它们，但可能不可能。真的，伙计。如果有办法的话，那就太好了。但至少到目前为止，我认为没有其他更好的选择。