颜色色调循环 - SCSS

Question

使用 SASS 可以遍历给定索引的色相标度的颜色吗？目前我只是为每一层做一个不同的 CSS 选择器。但我正在尝试使用 SASS 找到更有效的解决方案。但是正如你所看到的，我真的不知道从哪里开始。

//Current code
.element[ tier="1" ] > i {
  background: #08C026;
}

//Attempted solution (fail)
@for $i from 1 through 40 {
  .element[ tier="#{$i}" ] > i {
    background: #08C026; 
  }
}

Answer 1

试试这个：

 $class-slug: your-selector !default

 @for $i from 0 through 39
 .#{$class-slug}-#{$i}
 adjust_hue(#00ff00, $i*9)

Answer 2

要以编程方式生成颜色，您需要确定将颜色调整到所需范围所需的度数，并将其乘以计数器。

$qty: 40;
$step: 360deg / $qty;

@for $i from 0 through $qty - 1 {
    .element[ tier="#{$i}" ] > i {
        background: adjust-hue(#08C026, $step * $i);
    }
}

http://sassmeister.com/gist/2a9c4f3e1a9743a11d15

颜色色调循环 - SCSS

Color hue loop - SCSS

css

sass