less使用数组遍历（递归）动态生成class

最新推荐文章于 2023-06-06 17:15:33 发布

原创最新推荐文章于 2023-06-06 17:15:33 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less

less 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用Sass语言实现循环与条件判断的方法，通过定义颜色数组并利用循环和条件语句来生成对应的CSS类及样式。这种方法能够有效地减少代码重复，提高样式表的维护效率。

@colors          : red blue;
@colorsName : red , blue;
@len : length(@colors);
// wen条件判断
.each-color(@index) when (@index <= @len) {
	// 获取名称
    @name : extract(@colorsName , @index);
    // 拼接.color-名称
    .color-@{name}{
    	// extract从数组从取值
        color: extract(@colors , @index);
    }
    .each-color(@index + 1);
}
// 数组下标从1开始
.each-color(1);

@colors中的red和@colorsName中的red其实对于编译器来说都是一样的，就是一个普通字符串，只不过在赋给color属性时会作为颜色值，赋给class名事会作为字符串。所以在@name : extract(@colorsName , @index);这里，使用@colors效果是一样的