衝撃のタイトルですが本当の話です。汗
Sassをがっつり実際に使ったのはWetchに入社してからでした。
それまでの勉強期間ではCSSしか触ってきていなかったので、
「Sassはちょっと難しいけど使えるようになったらCSSより便利な言語」
みたいなふんわりした知識しかありませんでした。
コンパイルしなきゃいけない、とか
ネストして書く、とか
なんだか難しそうだし〜CSSもまだしっかり理解していないし〜
まだやらなくていいや…と言い訳ばかりしていたような気がします…
ですが！
もっと早く使っていればよかったなあ〜〜と今では思っています。
私の最大の勘違いポイントは
「Sassを学習するってことは、また１から新しい言語を習得しなきゃいけない？？」
って思っていましたが違いました。
「SassはCSSのメタ言語 = 別の言語ではない」
CSSをよりわかりやすく書くためのものなので、
CSSの知識がある程度あればすぐに覚えることができます。
そしてメタ言語ってなんでしょうか？
…私もよく分かってないのでググりましたが何やら難しい言葉ばかり。汗
CSSを、よりプログラミングっぽく直感的に書けるようにしたもの、と言う感じでしょうか?
（違っていたらごめんなさい）
プログラミングっぽく、というのは後ほど記述しますが
変数が使えたり、関数が使えたりします。
ここが難しそうポイントで避けたくなるのですが
使えるようになると便利すぎて、CSSには戻れません！！
Sassの種類
CSSのメタ言語にはいくつか種類があります。
・Sass(SCSS)
・LESS
・Stylus
そして少しややこしいのは
Sassには、SASSとSCSS
と書き方に2種類があります。
多くの人が使っているのはSCSS記法で、
理由としてはCSSにより近い形だからだと思います。
SCSS記法だと実際、CSSのままの形で書いても大丈夫です。
SASS記法は、インデントをさげて書くので｛｝も；使わないのが特徴です。
慣れれば記述量がこっちの方が少ないので良いのかもしれませんね
（まだ挑戦したことはないです。）
今回は、一番使いやすいであろうSassのSCSS記法について書こうと思います。
Sassのすごいところってどんなところ？
「Syntactically Awesome StyleSheet」の略がSassです。
翻訳すると
「文法的に素晴らしいスタイルシート」
…なんだかすごい。笑
ではSassを使ったら何がそんなにすごい！のでしょう✨
✏️何度も同じことを書かなくてすむようになる〜〜！
Sassで良いこと、と言ったらネストでかけることが一番の強みなのではないでしょうか。
本当に簡単な例ですがこんな感じです↓
ここでいうと、CSSでは2回書かなくてはいけなかった「h1」を
Sassだと1回ですみます。
この規模だとイマイチすごさ加減が分かりづらいのですが
擬似要素を書く時なんかにもっと実感できると個人的には思います。笑
あと、なにより修正があった場合にすごいが発揮されます。
この「h1」がもし「p」 要素に変わったら..?
もしCSSで書いていたら、「h1」と記載してある部分を全て書き直さないといけません。
ですがSassで書いていればひとつの場所の修正で済みます。
クラス名が変わるなんてことは割とよくあるのでそんな時にも楽ちんだな〜と実感します。
✏️プログラミングっぽく変数とか関数が使える〜〜！
わたしはfont-familyや、colorで使用することが多いです。
たとえば
使用するフォントを変数にいれて使っていれば、
プロジェクトが進んだ途中に「やっぱりこちらのフォントに変更したい」
と修正が入っても、大元の変数に格納しているコードの１箇所を修正すれば、
ひとつひとつの指定してある部分を修正しなくてすみます。
一括で修正できるのは大幅な時間短縮です。
もちろんデメリットもあります。
?コンパイルという壁
コンパイルするための環境構築が必要なのでとっつきにくさがあります。
GulpだったりWebpackだったり、いろんなやり方があります。
ですが簡単な方法があります！
エディタ、VScodeの拡張機能を利用すると簡単に環境を用意できます。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
1,拡張機能をインストールして
2,拡張子を.scssにしたSassが書いてあるファイルを用意して
3,WatchSassを押します。
そうするとSassファイルがコンパイルされ、
おなじみのCSSファイルが生成されるので、そのCSSファイルをhtmlでいつものように読み込めば完了です。
私がここで勘違いしていたポイントは
Sassファイル自体をhtmlを読み込んでスタイルを当てるものだと思っていました。
Sassはざっくりいうと書き方の違いであって、
コンパイルすることによって吐き出されるファイルは実際はCSSファイルということです。
初心者の私自身、
勉強中のwebpackでSassをコンパイルできるようにするまで結構時間がかかったので難しいと感じました。
VScodeでは簡単に環境を作れるのでおすすめします。
?使い込みすぎても良くない気がする
いろいろな便利な機能があるからこそ
使い込みすぎると視認性の低いソースになってしまう恐れがあると思いました。
誰が見ても分かりやすいコードを書くことはチームで作業するには大切なスキルの一つだと思っています。
ネストしすぎてややこしくなってしまっていたり、
変数を使いすぎて複雑になってしまったり….
便利なはずのSassをかえって複雑化してしまうと本末転倒ですね?
あとはCSSの基本を勉強してからの方が
より綺麗にSassを使えるのではないか、とも思います。
デメリットがあるとはいえ、
それを吹き飛ばしてしまうくらいのメリットがあるように感じます。
こんなにSassに対して色んな勘違いを起こしていた私でも
とっても便利に実務で使用しているので、まだ使っていない方はぜひ使ってみてください～～！
