cssは多く記載するほどメンテナンスが難しくなります
そこで使われるのが、@ifの条件分離や@forの繰り返し処理を上手に使うことによって、短く、他の人が見てもメンテナンスもしやすい状態に残すことができます
@if
@if
「もし〜ならば〜を実行する」みたいな特定の条件をもとに、その後の処理を行うか決める
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.30.35.jpg)
条件aに当てはまったら、直下の処理、当てはまらなかったら、条件bへ
条件b当てはまったら、直下の処理、それ以外は@elseの処理になります
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.27.59-2-1024x723.jpg)
この場合は$makeStyleで0を定義してます
なので、==1,==2以外の@elseの条件スタイルが適用されてます
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.28.25-1024x723.jpg)
これは$makeStyleで2で定義してます
なので、==2のスタイルが適用という感じです
@mixinと混ぜると短いコードで書けますねd(^_^o)
@for
繰り返し処理の命令文
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.32.41-1024x202.jpg)
throughを使用すると、終了数値の数字以下を繰り返します
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.33.00-1024x241.jpg)
toの場合だと、数字未満の繰り返し処理です
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.37.28-1-1024x556.jpg)
同じ3の数字を入れてます
through 3だと3以下を繰り返してます
@while
@while
条件に当てはまる間、繰り返し処理を実行します
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.38.19.jpg)
見たまんまですね(*゚▽゚*)
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.42.04-1024x346.jpg)
変数$value300を定義
$value>200で200以下になるまで繰り返し処理
$value-30を定義して、200以下になるまでー30の処理が繰り返されています
@each
リストの要素にそれぞれ処理を行う
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.51.01.jpg)
はい、これも単純ですね
![](https://shinkairoom.com/wp/wp-content/uploads/2020/12/スクリーンショット-2020-12-03-20.54.53-1024x347.jpg)
$Listで定義したa,b,c,dそれぞれに処理をしています