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

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

$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

Answer 2

试试这个：

 $class-slug: your-selector !default

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

色调循环 - SCSS

2 个答案: