いまさらSCSS

最近、SCSSを使い始めた。
まぁ、若いコーダーさんでも使う人が多いので、メンテナンス案件などではSCSSで修正入れないとよろしくないかなと。
まぁ、ChatGPTにお願いすればCSSもあっという間にSCSSに変換してくれるので、どっちでもいい気もしますが、SCSSならではの良いところに今更気がついたので書いておく。
ただ、まだ初心者ではあるので初歩の気づきなので断っておく。

まずは、やはり階層で管理できるのは、何度もclass名など書かなくて良くて楽。
これに関してはたいして利点とは思って無かったのですが、思ったより便利。

気づいたのが、「@media」の書きどころが意外と自由で使いやすい。

僕はコーディングする時、SPとPC用のcss両方を同時に書いてくので、SPサイズの時とPCサイズの時のcssコードをできるだけ１画面内に収めたいと思っています。

なのでcssのプロパティは全て１行で書く。
そして、割とこまごまと「@media」を並べて書く。
よく、何百何千行もまとめて「@media」に入っているタイプのcssを見ますが、同じ箇所のcssのSPとPCのソースがずっと遠くのどこかに存在することになり、両方に修正したい場合に修正箇所を探すのがストレスになるので嫌いなんです。
ただ、僕のこの書き方は一般的では無い。

一般的に以下の様に書くコードは、

p.test {
  color: #000;
  padding: 10px 5px 12px;
  border: 1px solid #333;
}

僕はこう書きます。

p.test { color: #000; padding: 10px 5px 12px; border: 1px solid #333; }

これが一般的では無いので、なんとなくこのまま納品するのが気が引けて、納品時に一般的なフォーマットに直したりしてました。

これが、SCSSの場合、cssはフォーマットして書き出されるし、scssファイルはあくまで元コードだし、cssが普通に見えればそれで良いよね？と。
まぁ、制作会社などでは会社ごとにルールなどがあるだろうからフリーランスならではなのかも知れないが。。。

ワクワクしたのが「@mixin」

あまり使い倒せてないが、「@mixin」意外と良いかも。
引数も使えるので、svgのグラフィックを@mixinで定義して色を引数で受け取れば色を変えて表示できる。
他にどんな使い方ができるだろうか？
今度ゆっくりググってみよう。

あと、SCSS出た頃「変数が使える」というのも利点の一つと言われていた。

例えば「$Black: #000;」と定義しておけば、「color: $Black」と書けるという話。
ただ当初から、これは全然魅力に感じてなくて、色なんて変えたかったら全置換で事足りると。
実際VSCodeなどのエディタでは一度使った色情報は、別のところで色入れる時には候補で出てくれるから、いちいち入力の手間もかからない。
for文も書けるらしいが、利用できる場面は限られて来る感じもするなぁ。
正直、このSCSSの変数はまだ良さがわからん状態です。

とまぁ、こんな状況で、全体的にSCSSの利用は以後の作業効率を上げると判断したので、使い続けてみようと思う。