使用较少的CSS组属性

Question

我创建了一个mixin，它会自动生成您扔给它的任何类。我的目标是能够组合属性。例如，您可能想要这样：

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

但是mixin这样做：

.py-20 {
    padding-top: 20rem;
}
.py-20 {
    padding-bottom: 20rem;
}

这是完整的Less代码

@padding: {
    20:             2rem;
    30:             3rem;
}

@responsive-modifiers: true;

#config () {
    .generate(py, padding-top, @padding);
    .generate(py, padding-bottom, @padding);
}

#config();

.generate(@prefix, @property, @list) {
    each(@list, {
        .@{prefix}-@{key} {
            @{property}: @value;
        }
    });
}

想法将受到欢迎！