0

background-colorリスト内の各タグに異なるタグを割り当てようとし%liています。これらの色には、色の色合い、または指定された 2 つの色の間のグラデーションを使用したいと思います。とても人気のあるClearによく似ています。私はsassで色を明るくしたり暗くしたりする機能に精通しています...

$this_color: darken($that_color, 10%)

しかし、それを超えて、探している効果を作成する方法がわかりません. 視覚的にここに私がやろうとしていることがあります:

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

2 に答える 2

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
于 2012-05-01T05:00:04.937 に答える
2

これは、ループで色を1つずつ変更する1つの方法です
http://jsfiddle.net/STuD5/1/

于 2012-04-26T06:56:32.560 に答える