SCSSを覚えて損はない？

現在､SCSSの勉強をしています｡

結論から言うと､かなり便利です｡

記述が楽になりますよ。

こんな感じでSCSSを書きます｡

@mixin waku {
  padding: 0.5rem;
  border: 1px dashed #000;
}

軽く意味を言っておきます｡

■@mixinでCSSを普通に書く

まず､@mixinを書き､そのあとに分かりやすい名前を書きます｡

上で言うとwakuですね｡

そのあと､{}内に普通にCSSを書きます｡

■名前を呼び出す

次に名前を呼び出します｡上で言うと､wakuになりますね｡

.box {
  @include waku;
}

クラス､上で言うと.boxですね｡それに対して､｢@include waku;｣でwakuを呼び出し｡

結果､上で書いた､

padding: 0.5rem;
  border: 1px dashed #000;

が適用されます｡

■便利だと思う理由

便利だと思う理由は､たとえば､wakuのborderを変えたい時､CSSのみならコードを探して変更しないといけません｡

数カ所でしたら､コードを探して変更すれば良いでしょう｡しかし､何カ所もなると見落としたが増えます｡

そこで､mixinを使えば値を変えたらすべて変更されますね｡もちろん､上で言うと@includeでwakuを読み込んでおく必要がありますが｡

mixinはだいぶ楽ですので､覚えて損はないですね｡

慣れるまでが大変ですが､慣れたら｢なんて便利なんだ｣と思うはず｡

｢CSSに飽きたな､なんか他に覚えたいな｣という方はSCSSを勉強してみてください｡

■さいごに

SCSSはコンパイルが必要です｡vscodeを使えば簡単にコンパイルできます｡

詳しくは｢vscode scss｣で調べてください｡

ぼくは､SCSSを使っていますが､すべてSCSSで書いているわけではありません｡

しかし､できるだけSCSSのみでいけるかどうか調べています｡

SCSSにベタ惚れ（笑）｡

おわり｡