less中each的用法

最新推荐文章于 2023-02-16 16:32:50 发布

原创最新推荐文章于 2023-02-16 16:32:50 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#less

这篇博客探讨了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>