css - 生成具有某种模式的样式序列

Question

我需要在 Less 中生成一些实用类，例如 margin-top-10、margin-bottom-20 等。目前我我相信现在非常有效地这样做:

.margin {
    &-bottom {
        &-5 {
            margin-bottom: 5px;
        }
        &-10 {
            margin-bottom: 10px;
        }
        &-20 {
            margin-bottom: 20px;
        }
        &-30 {
            margin-bottom: 30px;
        }
    }

    &-top {
        &-5 {
            margin-top: 5px;
        }
        &-10 {
            margin-top: 10px;
        }
        &-20 {
            margin-top: 20px;
        }
        &-30 {
            margin-top: 30px;
        }
    }
}

有没有办法在 Less 中创建类似程序的东西来生成它

margin-utility([<direction>, <direction>, <direction>], [<value>, <value>, value>]);

例如

margin-utility(['top', 'bottom'], [5, 10, 15, 20, 30]);

Answer 1

Note: It sounds like really bad practice to create individual classes for each margin direction and size combination. They would become very tedious maintain and so I wouldn't recommend it. But the answer to your question is - Yes, you can do it with Less.

您可以使用 Less 循环遍历值列表、方向，然后使用插值创建选择器和属性值对。下面是一个示例代码(为清楚/解释的目的添加的内联注释)。

@values: 5, 10, 15, 20, 30; /* the values */

.margin-utility(@values; @directions...){ /* utility wrapper mixin which takes values and directions */
    .loop-directions(@i) when (@i > 0) { /* iterate through each direction value */
        @direction: extract(@directions, @i);
        .create-margin(@values; @direction); /* call margin creation mixin with current direction */
        .loop-directions(@i - 1); /* call next iteration */
    }
    .loop-directions(length(@directions)); /* call first iteration */
}
.create-margin(@values; @direction){ /* mixin to loop through values and create classes */
    .loop-values(@j) when (@j > 0) { /* iterate through each value */
        @value: extract(@values, @j);
        .margin-@{direction}-@{value}{ /* create selector through selector interpolation */
            margin-@{direction}: unit(@value, px); /* create property through property interpolation */
        }
        .loop-values(@j - 1);
    }
    .loop-values(length(@values));
}
.margin-utility(@values; top, bottom, left);