如何在LESS中遍历嵌套规则集？消除重复变量方案咨询

你可以直接遍历@m-button-sizes-rules这个规则集，不需要额外的尺寸名称变量。之前的写法出错是因为在each遍历规则集时，不需要通过@key重新取值，each内部已经提供了@value直接对应每个子规则集。

正确的写法如下：

@m-button-sizes-rules: {
    @x-large: {
        height: 50px;
        padding: 15px 25px;
    }
};

.box {
    each(@m-button-sizes-rules, {
        .test {
            @value();
        }
    })
}

如果需要根据尺寸名称生成不同的类名（比如.x-large），也可以利用@key变量扩展写法：

@m-button-sizes-rules: {
    @x-large: {
        height: 50px;
        padding: 15px 25px;
    }
    @large: {
        height: 40px;
        padding: 10px 20px;
    }
};

.box {
    each(@m-button-sizes-rules, {
        &.@{key} {
            .test {
                @value();
            }
        }
    })
}

编译后会生成对应的CSS：

.box.x-large .test {
    height: 50px;
    padding: 15px 25px;
}
.box.large .test {
    height: 40px;
    padding: 10px 20px;
}

本质上，当each遍历规则集时，每次迭代的@key对应规则集里的变量名（比如x-large），@value直接对应该变量存储的嵌套规则，直接调用@value()就能展开规则，不需要额外赋值到@x再调用。

内容的提问来源于stack exchange，提问作者用户17435438