1

これは Sass/Scss では不可能であると確信していますが、これは私自身の構文の誤解ではなく、Sass の制限であることを確認したいと思います...

各リスト項目が一連の変数から割り当てられた異なる色を取得するスタイルのリストを作成しようとしています:

$color1: #FF0000; // Red
$color2: #FFBF00; // Orange
$color3: #FFFF00; // Yellow
$color4: #7FFF00; // Green
$color5: #007FFF; // Light Blue
$color6: #00FFFF; // Cyan
$color7: #0000FF; // Blue
$color8: #7F00FF; // Purple
$color9: #FF00FF; // Magenta

@for $i from 1 through 9 {
a[href^="link#{$i}"] { color: $color#{$i};
}
}

ただし、Sass はコンパイルされません。この方法で変数名をインクリメントすることは不可能だと思います。誰でも確認できますか？

4

1 に答える 1

3

動的な方法で変数名を作成することはできませんが、さらに優れたセマンティクスと柔軟性でこれを実現できます。

$red        : #FF0000;
$orange     : #FFBF00;
$yellow     : #FFFF00;
$green      : #7FFF00;
$lightblue  : #007FFF;
$cyan       : #00FFFF;
$blue       : #0000FF;
$purple     : #7F00FF;
$magenta    : #FF00FF;

$colors: $red $orange $yellow $green $lightblue $cyan $blue $purple $magenta;

@each $color in $colors {
  $i: index($colors, $color);
  a[href^="link#{$i}"] { color: $color; }
}

更新： Sass 3.3では、繰り返しを減らすためにマップを使用できます。

$colors: (
  red        : #FF0000,
  orange     : #FFBF00,
  yellow     : #FFFF00,
  green      : #7FFF00,
  lightblue  : #007FFF,
  cyan       : #00FFFF,
  blue       : #0000FF,
  purple     : #7F00FF,
  magenta    : #FF00FF,
);

@each $name, $color in $colors {
  a[href^="link#{$name}"] { color: $color; }
}
于 2012-10-13T06:40:03.360 に答える