わたしがHTML、CSSの勉強をし始めたのが約3年前。
それから経験を積んでいく中で、「SCSS」なるものがある
というのはなんとなく聞いたことがありました。
「とりあえず、CSSをもっとちゃんと書けるようになろう！」
「とりあえずCSS書けるし、それで困ってないから…」
などのようなことを考え、あまり調べもせずにいました。
ある時、意を決して「SCSS」どんなものなのか少し勉強してみたところ、
今は、普通のCSSを見たり書いたりするのが面倒になりました。
この記事はSCSSの書き方やメリットを説明するものではなく、
「CSSをある程度書けるようになったら、
すぐにSCSSもかけるようになったほうが便利ですよ～」という記事です。
#SCSSとは
簡単に説明すると、SCSSは「CSSをより効率的に記述できる言語」
みたいな感じでいいと思います。
#すぐ学ぶべき理由
SCSSはCSSがすでに書ける人なら、全然苦労せずに書けるようになると思います。
もちろん、深堀りして勉強すれば、たくさんの機能があるかもしれませんが、
基礎的な書き方を覚えるだけで、大きなメリットを得られます。
##コードが見やすくなる
以下に比較のコードを載せてみました。
画像内の左がCSS、同じコードを右にSCSSで書いてみました。
SCSSの方が、親要素と子要素の構造がわかりやすく、コードが見やすいと思いませんか？
コードの記述量が多くなればなるほど、これは大きなメリットになります。
#ネスト(入れ子)だけでもOK
先程、例として出したSCSSは、言ってみれば
親要素の中に子要素のCSSを記述していっただけのものです。
これはSCSSの基礎的な書き方ですが、まずはこれだけでもいいと思います。
#まとめ
SCSSは環境設定が少しややこしいと感じるかもしれませんが、
VScodeならプラグインを入れるだけですし、
他のコードエディターの場合はググれば方法が見つかると思います。
(わたしはVScodeでしか使ったことがないです。)
CSSは書いたことがあるけど、まだSCSSは書いたことがないという方。
ぜひ、一度やってみてください。難しくないですので。