SCSS

Question

とスタイルを自動化する@Forまたは@eachを作成

私が達成しようとしている出力は、以下の

.gray-1 { 
    height: 10px; 
} 
.gray-2 { 
    height: 20px; 
} 
.gray-3 { 
    height: 30px; 
} 
.gray-4 { 
    height: 40px; 
} 
.gray-5 { 
    height: 50px; 
} 
.gray-6 { 
    height: 60px; 
} 
.gray-7 { 
    height: 70px; 
} 
.gray-8 { 
    height: 80px; 
} 
.gray-9 { 
    height: 90px; 
} 
.red-1 { 
    height: 10px; 
} 
this will end at 9 and then .blue-1 ++ will start 
etc.... 

は私が一緒に遊んでい現在の各SCSS機能であるが、それは

.gray red blue-1 { 
    height: 10px; 
} 

を出力します

グレー1-9を通過させ、次に赤1-9、次に青1-9を通過させることはできますか？ また、高さリストを行う必要がありますか？私はちょうどn + 10を最大で90にすることはできますか？ここで

$height-list: 10 20 30 40 50 60 70 80 90; 
$color-var: gray red blue; 

@each $current-color in $height-list { 
    $i: index($height-list, $current-color); 
    .#{$color-var}-#{$i} { 
     height: #{$current-color}px; 
    } 
} 

codepen

Answer 1

このオプションは完璧に機能します。 2つのマルチバーに2つのループを使用するだけです。

SCSS：

$height-list: 10, 20, 30, 40, 50, 60, 70, 80, 90; 
$color-var: gray, red, blue; 

    @for $c from 1 through length($color-var) { 
     @for $h from 1 through length($height-list) { 
     .#{nth($color-var, $c)}-#{$h} { 
      height: nth($height-list, $h) + px; 
     } 
     } 
    } 

CSS出力：

.gray-1 { 
    height: 10px; } 

.gray-2 { 
    height: 20px; } 

.gray-3 { 
    height: 30px; } 

.gray-4 { 
    height: 40px; } 

.gray-5 { 
    height: 50px; } 

.gray-6 { 
    height: 60px; } 

.gray-7 { 
    height: 70px; } 

.gray-8 { 
    height: 80px; } 

.gray-9 { 
    height: 90px; } 

.red-1 { 
    height: 10px; } 

.red-2 { 
    height: 20px; } 

.red-3 { 
    height: 30px; } 

.red-4 { 
    height: 40px; } 

.red-5 { 
    height: 50px; } 

.red-6 { 
    height: 60px; } 

.red-7 { 
    height: 70px; } 

.red-8 { 
    height: 80px; } 

.red-9 { 
    height: 90px; } 

.blue-1 { 
    height: 10px; } 

.blue-2 { 
    height: 20px; } 

.blue-3 { 
    height: 30px; } 

.blue-4 { 
    height: 40px; } 

.blue-5 { 
    height: 50px; } 

.blue-6 { 
    height: 60px; } 

.blue-7 { 
    height: 70px; } 

.blue-8 { 
    height: 80px; } 

.blue-9 { 
    height: 90px; } 

/*# sourceMappingURL=style.css.map */ 

Answer 2

この

$height-list: 10 20 30 40 50 60 70 80 90; 
$gray-color:gray; 
$red-color:red; 
$blue-color:blue; 
@each $current-color in $height-list { 
    $i: index($height-list, $current-color); 

    .#{$gray-color}-#{$i} { 
     height: #{$current-color}px; 
    } 
.#{$red-color}-#{$i} { 
     height: #{$current-color}px; 
    } 
.#{$blue-color}-#{$i} { 
     height: #{$current-color}px; 
    } 
} 

に私の解決策希望は、これはあなたがまた、この

$height-list: 10 20 30 40 50 60 70 80 90; 
$colors: gray,red,blue; 
@each $current-color in $colors{ 
    $color:index($colors,$current-color); 
    @each $current-height in $height-list { 
     $i: index($height-list, $current-height); 
    .#{$current-color}-#{$i} { 
     height: #{$current-color}px; 
    } 
    } 
} 

この チェックなど、複数の変数を避けるために行うことができます

を助けています

Answer 3

2つの配列がある場合は、おそらく2つのループが必要です。

$height-list: 10 20 30 40 50 60 70 80 90; 
$color-var: gray red blue; 

@each $color in $color-var{ 
    @each $height in $height-list{ 
    $i: index($height-list, $height) 
    .#{$color-var}-#{$i} { 
     height: #{$height}px; 
    } 
    } 
}