# 【Html&Cssで作る四択クイズゲーム開発記録①】Sassのリストと@forループを使ったコード省力化の話 |p2>2021/12/15{1}Sass{1}Sassの@forループとリストのキーや値の取り出し{2}「配列」=「リスト」 in <リスト>`構文で ```scss // 簡単なリスト $list: [a, b, c, d]; $i: 0; @each $item in $list { .hoge-#{$item} { piyo: '#{$item}'; index: $i; } $i: $i+1; } ``` これを[Sassmeister](https://www.sassmeister.com/)などのオンラインコンパイラーで試すと !821*430*[2](article67/__2.jpg) というようにリストからCSSスタイルのブロックが展開されていることが分かります。リストによる簡単な繰り返しなら`@each ~ in`構文でOKなのですが、ループ中に次の要素を一つ先読みしたいときなど、微妙に手の痒いところに届かない場合があります。そこで首題の通り、`@for`構文を使ったイテレーションを利用することになります。 ```scss // 簡単なリスト② $list: [a, b, c, d]; @for $i from 1 through length($list) { .hoge-#{nth($list,$i)} { piyo: '#{nth($list,$i)}'; index: $i - 1; } } ``` この`@for`構文は、`@for <インデックス変数> from <初期値> through <終了値>`で利用します。リストを@forでループさせる場合、初期値は1から始める必要があります(0ではないことに注意)。これを試すと先程の@eachの場合と同じ結果を得ます。 !823*432*[3](article67/__3.jpg) さらにリストの面白い特徴がリストを使って多重配列的に入れ子にすることが出来ることです。 ```scss // 簡単なリスト③ $list: [ [a, [1, 2]], [b, [5, 6]], [c, [9, 10]], [d, [13, 14]] ]; @for $i from 1 through length($list) { .hoge-#{nth(nth($list,$i),1)} { piyo: '#{nth(nth(nth($list,$i),2),1) + nth(nth(nth($list,$i),2),2)}'; index: $i - 1; } } ``` !824*430*[4](article67/__4.jpg) 釘括弧`[]`だけでリストを作ると括弧の数が多くなるので、より見やすいリストを作るなら連想配列として特別な意味を持つ丸括弧`()`でリストを作ると良いでしょう。先程のコードは以下のように置き換えできます。 ```scss // 簡単なリスト④ $list: ( a: [1, 2], b: [5, 6], c: [9, 10], d: [13, 14] ); @for $i from 1 through length($list) { .hoge-#{nth(nth($list,$i),1)} { piyo: '#{nth(nth(nth($list,$i),2),1) + nth(nth(nth($list,$i),2),2)}'; index: $i - 1; } } ``` !825*424*[5](article67/__5.jpg) ここでは紹介しませんが、この丸括弧でのリストは`@each ~ in`構文で|px>{3}Key-Valueパターン{3}sass:map

さあ４択クイズを始めましょう

クリックしてスタート

問題１：タコの足は何本？

５本
８本
１０本
足はない

問題２：タコは何動物？

地球外生物
緩歩動物
実は植物
軟体動物

問題３：タコの水揚げ量が世界一の国？

中国
カナダ
モーリタニア
日本

もう一度トライ

``` 以下は`style.css`の元になるscssのソースコード: ```scss style.scss(修正前) #game-wrapper { width: 100%; height: 300px; background-color: darkgray; box-sizing: border-box; position:relative; input { display: none; } .game-header { position: absolute; top: 0; left: 0; background: #220c0c; color: #ceeece; z-index: 1; margin: 0; font-size: 22px; padding: 6px 0 6px 0; width: 100%; } .stage { position: absolute; display: block; width: 100%; height: 100%; font-size: 24px; &--op { display: flex; align-items: center; justify-content: center; label { display: block; flex: 0 0 auto; margin: 0 auto; animation: flash 1s linear infinite; } } &--main { display: flex; align-items: center; justify-content: center; label { flex: 0 0 auto; margin: 0 auto; } &--1 { color: blue; font-size: 22px; } &--2 { color: rgb(99, 231, 169); font-size: 22px; } &--3 { color: rgb(235, 212, 85); font-size: 22px; } } &--end { display: flex; align-items: center; justify-content: center; flex-direction: column; background: darkgray; label { flex: 0 0 auto; display: inline-block; font-weight: bold; padding: 0 0 0 0; text-decoration: none; color: #00BCD4; background: #ECECEC; margin: 0 auto; animation: flash 1s linear infinite; } } @keyframes flash { 0%,100% { opacity: 1; } 50% { opacity: 0; } } } .stage--main { ul.flexlist { border: 1px solid #666; display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; margin: 10px auto 2px; padding: 0; width: 300px; li { border: 1px solid #aaa; line-height: 110%; margin: 5px 2px 5px 2px; padding: 8px; text-align: center; width: 35%; &:hover { color: chartreuse; } } } } #stage { &---op {display: flex} &---1,&---2,&---3,&---reset {display: none} } #start:checked ~ { #stage---op {display: none} #stage---1 { display: flex; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards; } } #stage1:checked ~ { #stage---1 {display: none} #stage---2 { display: flex; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards; } } #stage2:checked ~ { #stage---2 {display: none} #stage---3 { display: flex; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards; } } #stage3:checked ~ { #stage---3 {display: none} #stage---reset { display: flex; opacity: 1; animation: fadeIn 0.6s ease-in 0s forwards; } } @keyframes fadeIn { 0% { display: none; opacity: 0; } 1% { display: flex; opacity: 0; } 100% { display: flex; opacity: 1; } } } ``` ### @forを使って改善する！では@for構文使って無駄なコードを改善していきましょう。先に改善後の`style.scss`をドカッと修正済みの完成品を以下に示します。 ```scss style.scss(改善後) #game-wrapper { width: 100%; height: 300px; background-color: darkgray; box-sizing: border-box; position:relative; input { display: none; } .game-header { position: absolute; top: 0; left: 0; background: #220c0c; color: #ceeece; z-index: 1; margin: 0; font-size: 22px; padding: 6px 0 6px 0; width: 100%; } .stage { position: absolute; display: block; width: 100%; height: 100%; font-size: 24px; &--op { display: flex; align-items: center; justify-content: center; label { display: block; flex: 0 0 auto; margin: 0 auto; animation: flash 1s linear infinite; } } &--main { display: flex; align-items: center; justify-content: center; label { flex: 0 0 auto; margin: 0 auto; } //👇修正ポイント① @each $key, $val in (1:blue, 2:rgb(231, 185, 99), 3:rgb(211, 51, 203)) { &--#{$key} { color: $val; font-size: 22px; } } } &--end { display: flex; align-items: center; justify-content: center; flex-direction: column; background: darkgray; label { flex: 0 0 auto; display: inline-block; font-weight: bold; padding: 0 0 0 0; text-decoration: none; color: #00BCD4; background: #ECECEC; margin: 0 auto; animation: flash 1s linear infinite; } } @keyframes flash { 0%,100% { opacity: 1; } 50% { opacity: 0; } } } .stage--main { ul.flexlist { border: 1px solid #666; display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; margin: 10px auto 2px; padding: 0; width: 300px; li { border: 1px solid #aaa; line-height: 110%; margin: 5px 2px 5px 2px; padding: 8px; text-align: center; width: 35%; &:hover { color: chartreuse; } } } } #stage { &---op {display: flex} //👇修正ポイント② @each $item in (1, 2, 3, reset) { &---#{$item} { display: none } } } //👇修正ポイント③ $stages: ( 'start' : 'op', 'stage1': '1', 'stage2': '2', 'stage3': '3' ); @for $i from 1 through length($stages) { ##{nth(nth($stages, $i),1)}:checked ~ { #stage---#{nth(nth($stages, $i),2)} {display: none} @if $i == length($stages) { #stage---reset { display: flex; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards; } } @else { #stage---#{nth(nth($stages, $i+1),2)} { display: flex; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards; label::before { content: '問題#{$i}：'; } } } } } @keyframes fadeIn { 0% { display: none; opacity: 0; } 1% { display: flex; opacity: 0; } 100% { display: flex; opacity: 1; } } } ``` まずはソースコード内にコメントを挿入している箇所のうち、|px>{1}修正ポイント①{1}修正ポイント②{1}修正ポイント③ タコの足は何本？

５本
８本
１０本
足はない

タコは何動物？

地球外生物
緩歩動物
実は植物
軟体動物

タコの水揚げ量が世界一の国？

中国
カナダ
モーリタニア
日本

... ``` ということで今回の修正は以上です。 Sassコードのリファクタリングには積極的にリストと@forループを利用することを考えてください。 - - - &[self]~[4]~[article]~(1) ## 参考サイト [Sass meister | 外部ツール](https://www.sassmeister.com/)