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>]);

E.g。

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

Answer 1

注意：为每个边距方向和尺寸组合创建单独的类似乎是一种非常糟糕的做法。它们会变得非常繁琐，所以我不推荐它。但是你的问题的答案是 - 是的，你可以用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);

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

1 个答案: