\`each索引循环

上海社会科学院 CSS

神奇猴子米亚

2020-03-18

我想知道是否可以为@each循环获取元素索引。

我有以下代码，但我想知道$i变量是否是执行此操作的最佳方法。

当前代码：

$i: 0;
$refcolors: #55A46A, #9BD385, #D9EA79, #E4EE77, #F2E975, #F2D368, #F0AB55, #ED7943, #EA4E38, #E80D19;

@each $c in $refcolors {
    $i: $i + 1;
    #cr-#{$i} strong {
        background:$c;
    }   
}

第2151篇《\`each索引循环》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
凯伽罗 2020.03.18

首先，该@each功能不是来自Compass，而是来自Sass。

要回答您的问题，这不能通过each循环来完成，但是很容易将其转换为@for可以执行以下操作的循环：

@for $i from 1 through length($refcolors) {
    $c: nth($refcolors, $i);

    // ... do something fancy with $c
}
DavaidMandy 2020.03.18

更新此答案：是的，您可以使用@each循环来实现：

$colors-list: #111 #222 #333 #444 #555;

@each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
    .stuff-#{$i} { 
        color: $current-color;
    }
}

资料来源：http : //12devs.co.uk/articles/handy-advanced-sass/

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android