Question

我在SASS中有一个for循环，循环遍历页面类，为每个模块插入一个颜色中断。例如：

@for $i from 1 through 4 { // the loop
    .m0#{$i} .module-title{
    background-color: nth($m_col_lvl_01_list, $i);
    }
//- end loop
}

编译为：

.m01 .module-title{
    background-color: green;
}
.m02 .module-title{
    background-color: blue;
}
.m03 .module-title{
    background-color: yellow;
}
.m04 .module-title{
    background-color: orange;
}

在我目前的任务中它包含.m00有没有办法在循环中包含00？

Answer 1

我认为你仍然可以在for循环中使用0来实现你想要的东西。

$list: (green, blue, orange, red, yellow);

//loop from 0 to the length of the list which isn't hardcoded
@for $i from 0 to length($list) {
    .m0#{$i} .module-title {
        //simply add one to the loop index to get the correct list item
        background-color: nth($list, $i + 1);
    }
}

这将编译为以下CSS

.m00 .module-title {
  background-color: green;
}

.m01 .module-title {
  background-color: blue;
}

.m02 .module-title {
  background-color: orange;
}

.m03 .module-title {
  background-color: red;
}

.m04 .module-title {
  background-color: yellow;
}

SASS For Loop包括0

1 个答案: