カテゴリー
[Sass] scssで扱う配列でのイテレーションを理解する ~ cssだけでチャートを描画するための前知識
※ 当ページには【広告/PR】を含む場合があります。
2020/05/15
scssの配列の文法色々
Lists(リスト)Lists contain a sequence of other values.(リストは連続した値を含むもの)()リスト(配列)
$array: (hoge1, hoge2, hoge3); // コンマ切り
// OR
$array: (hoge1 hoge2 hoge3); // スペース切り
[]
$array: [hoge1, hoge2, hoge3]; // コンマ切り
// OR
$array: [hoge1 hoge2 hoge3]; // スペース切り
配列sassの配列()[](hoge1, hoge2, ...)[piyo1, piyo2,...]
$array: hoge1, hoge2, hoge3;
// OR
$array: hoge1 hoge2 hoge3;
sassの配列Sassの配列の操作色々
nth
// nth($array, $index):
nth($array, 1); // hoge1
nth($array, 2); // hoge2
length
// length($array)
length($array); // 3
index
// index($array, $element)
index($array, hoge1); // 1
index($array, hoge3); // 3
sassの配列をどう使うべきか？
[],
// 多次元配列
$itemss: [[black, lime, fuchsia, olive], [blue, aqua], [yellow, red]];
$i: 0; $j: 0;
@each $items in $itemss {
@each $item in $items {
.group#{$i}-element#{$j}-bg {
background: #{$item};
}
$j: $j+1;
}
$i: $i+1;
$j: 0;
}
.group0-element0-bg {
background: black;
}
.group0-element1-bg {
background: lime;
}
.group0-element2-bg {
background: fuchsia;
}
.group0-element3-bg {
background: olive;
}
.group1-element0-bg {
background: blue;
}
.group1-element1-bg {
background: aqua;
}
.group2-element0-bg {
background: yellow;
}
.group2-element1-bg {
background: red;
}
釘かっこ"()"を配列のバウンダリー識別文字に使うパターン
()
$itemss: ((black, lime, fuchsia, olive), (blue, aqua), (yellow, red));
$i: 0; $j: 0;
@each $items in $itemss {
@each $item in $items {
.group#{$i}-element#{$j}-bg {
background: #{$item};
}
$j: $j+1;
}
$i: $i+1;
$j: 0;
}
丸括弧カッコ"()"を使わない配列を使うケース
$itemss: black lime fuchsia olive, blue aqua, yellow red;
$i: 0; $j: 0;
@each $items in $itemss {
@each $item in $items {
.group#{$i}-element#{$j}-bg {
background: #{$item};
}
$j: $j+1;
}
$i: $i+1;
$j: 0;
}
スペースとコンマを逆に取り扱うケース
$itemss: black, lime, fuchsia, olive blue, aqua yellow, red;
$i: 0;
$j: 0;
@each $items in $itemss {
@each $item in $items {
.group#{$i}-element#{$j}-bg {
background: #{$item};
}
$j: $j+1;
}
$i: $i+1;
$j: 0;
}
.group0-element0-bg {
background: black;
}
.group1-element0-bg {
background: lime;
}
.group2-element0-bg {
background: fuchsia;
}
.group3-element0-bg {
background: olive;
}
.group3-element1-bg {
background: blue;
}
.group4-element0-bg {
background: aqua;
}
.group4-element1-bg {
background: yellow;
}
.group5-element0-bg {
background: red;
}
配列の修正
()[]
$itemss: (black, lime, fuchsia, olive) (blue, aqua) (yellow, red);
$i: 0; $j: 0;
@each $items in $itemss {
@each $item in $items {
.group#{$i}-element#{$j}-bg {
background: #{$item};
}
$j: $j+1;
}
$i: $i+1;
$j: 0;
}
コンマを使わない配列
$itemss: (black lime fuchsia olive) (blue aqua) (yellow red);
$i: 0;
$j: 0;
@each $items in $itemss {
@each $item in $items {
.group#{$i}-element#{$j}-bg {
background: #{$item};
}
$j: $j+1;
}
$i: $i+1;
$j: 0;
}
混ぜるな危険ケース
1. 括弧で配列のバウンダリーを示し、コンマを要素セパレータとして使う
2. 括弧で配列のバウンダリーをを示し、スペースを要素セパレータとして使う
3. コンマで配列のバウンダリーをを示し、スペースを要素セパレータとして使う
括弧とコンマとスペース
$itemss: [black lime fuchsia olive], blue aqua, (yellow, red);
$i: 0;
$j: 0;
@each $items in $itemss {
@each $item in $items {
.group#{$i}-element#{$j}-bg {
background: #{$item};
}
$j: $j+1;
}
$i: $i+1;
$j: 0;
}
$itemss: ((black, lime, fuchsia, olive) blue, aqua [yellow, red]);
$i: 0;
$j: 0;
@each $items in $itemss {
@each $item in $items {
.group#{$i}-element#{$j}-bg {
background: #{$item};
}
$j: $j+1;
}
$i: $i+1;
$j: 0;
}
Sass配列を使ったイテレーション
@each@forで配列をイテレーションするパターン
@each
$itemss: [[black, lime, fuchsia, olive], [blue, aqua], [yellow, red]];
@for $i from 1 through length($itemss) {
@for $j from 1 through length(nth($itemss, $i)) {
.group#{$i - 1}-element#{$j - 1}-bg {
background: #{nth(nth($itemss, $i), $j)};
}
}
}
@whileで配列をイテレーションするパターン
whilecontinuebreak@while
$itemss: [[black, lime, fuchsia, olive], [blue, aqua], [yellow, red]];
$i: 1;
@while $i <= length($itemss) {
$j: 1;
@while $j <= length(nth($itemss, $i)) {
.group#{$i - 1}-element#{$j - 1}-bg {
background: #{nth(nth($itemss, $i), $j)};
}
$j: $j+1;
}
$i: $i+1;
}
@whileおまけ 〜 今回のスタイルの利用例
.circle {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
}
$itemss: [[black, lime, fuchsia, olive], [blue, aqua], [yellow, red]];
$i: 0; $j: 0;
@each $items in $itemss {
@each $item in $items {
.group#{$i} {
&.element#{$j}-bg {
background: #{$item};
}
}
$j: $j+1;
}
$i: $i+1;
$j: 0;
}
<div>
<div class="circle group0 element0-bg"></div>
<div class="circle group0 element1-bg"></div>
<div class="circle group0 element2-bg"></div>
<div class="circle group0 element3-bg"></div>
</div>
<div>
<div class="circle group1 element0-bg"></div>
<div class="circle group1 element1-bg"></div>
</div>
<div>
<div class="circle group2 element0-bg"></div>
<div class="circle group2 element1-bg"></div>
</div>
まとめ
(): 丸カッコ[]: 釘カッコ,: カンマ : スペース
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー