这篇博客探讨了Less预处理器中的两种循环语法，包括`each`循环的使用，展示如何通过变量动态创建CSS选择器。文章通过实例解释了如何利用变量`@selectors`生成`.sel-blue`, `.sel-green`和`.sel-red`样式，并且提供了另一种形式的`each`循环，生成`.one-1`, `.two-2`和`.three-3`选择器，展示了Less的灵活性和代码复用能力。
<style lang="less">
@selectors: blue, green, red;
each(@selectors, {
.sel-@{value} {
a: b;
}
})
</style>会输出
<style lang="less">
.sel-blue {
a: b;
}
.sel-green {
a: b;
}
.sel-red {
a: b;
}
</style>也可以这么写：
<style lang="less">
@selectors: {
one: blue;
two: green;
three: red;
}
each(@selectors, {
.@{key}-@{index} {
color: @value;
}
})
</style>会输出
<style lang="less">
.one-1 {
color: blue;
}
.two-2 {
color: green;
}
.three-3 {
color: red;
}
</style>
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
