Sass 颜色函数列表渐变答案

【问题标题】：Sass Color Functions List GradientSass 颜色函数列表渐变
【发布时间】：2012-04-26 03:10:07
【问题描述】：

我正在尝试为列表中的每个 %li 标记分配不同的 background-color。我希望这些颜色要么使用颜色的阴影，要么使用两种指定颜色之间的渐变。很像非常受欢迎的Clear。我熟悉使用 sass 使颜色变亮和变暗的能力...

$this_color: darken($that_color, 10%)

但除此之外，我不知道如何创造我正在寻找的影响。从视觉上看，这是我想要做的：

%ul
    %li full color
    %li darken 5%
    %li darken 10%
    ...

【问题讨论】：

标签： css colors haml sass

【解决方案1】：

这是一种方法在循环中一一更改颜色
http://jsfiddle.net/STuD5/1/

【讨论】：

【解决方案2】：

// set your color
$backgroundColor: red

// set the scale/increment for the function
$backgroundColorScale: 8

// number of items in your list
$numberOfItemsInList: 10

// here's a custom function to change the color
// but you could make this fairly advanced
// and shift color, saturate, etc.
@function -modify-bg($bgcolor, $counter, $depth: $backgroundColorScale)
  @return lighten($backgroundColor, ($i * $backgroundColorScale))

// here's the loop that steps through LIs and assigns each a new bg
$i: 0
@while $i < $numberOfItemsInList
  li:nth-child(#{$i})
    background-color: -modify-bg($backgroundColor, $i)
  $i: $i + 1

【讨论】：