こんにちは。ITベンチャー企業でWebエンジニアをしている雅です。
HTMLやCSSコーディングをある程度学んで、新しい技術を身につけようと思ってWebサイトを漁っていると「現場ではSassをよく使っているよ〜」といった記事を見かけたことはないでしょうか？
CSSを学んでいざ開発していこうと思ったら
CSSって現場で使ってないの？
Sassって何！？
と初めはなりますよね。
そこで今回は
・Sassのメリット・デメリット
・SassとCSSの書き方の違い
を紹介します。
CSSを学びたての入門者の方向けの記事となっておりますので、Sassって何か知りたいなと考えている方はぜひ読んでみてください！
目次
Sassとは？
そもそもSassとはなんぞやというところなのですが、Sassは従来のCSSを効率的に書くことができるメタ言語です。
元々はSyntactically Awesome Style Sheetsの略だと言われています。
日本語に訳すと「書き方がかっこいいスタイルシート」です。
その名の通り、従来のCSSから無駄な記述を無くしてスタイリッシュに書けるようにという意図の下開発されたもので、CSSとの違いはその書き方だけでなく、変数や関数が使えるなど、プログラミングのような処理をCSSに組み込んだようなメタ言語です。
拡張子は「.sass」または「.scss」です。
SassにはSASSとSCSSの二つがあり、両方それぞれ書き方が若干異なります。この記事ではSCSSの書き方を紹介します。
Sassのメリット・デメリット
ここではSassのメリット・デメリットを、従来のCSSのコードと比較しながらいくつか紹介していきます！
Sassのメリット
CSSの記述量を減らせる
これはSassの一番の利点だと思います。
どう減らせるのかというと、CSSでは入れ子でセレクタを指定する時はスペースを開けて記述していきましたが、Sassの場合は入れ子の親となるセレクタの{ } の中に続けて記述することができます。
文章を読んでも理解しづらいと思うので、コードを比較してみていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* style.css */ .nav { margin:10px; background-color:#111; } .nav ul { padding:3px 5px; } .nav ul li { list-style-type: none; font-size: 20px; color:#fff; } |
よくあるナビゲーション関連のCSSですね。これをSassで書くと、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// style.scss .nav { margin:10px; background-color:#111; ul { padding:3px 5px; li { list-style-type: none; font-size: 20px; color:#fff; } } } |
重複しているセレクタの記述が省けてより入れ子関係がわかりやすくなりましたね。
このように、SassはCSSの無駄をとことん排除した書き方になります。
変数を置いて重複する箇所を変数で代用できる
プログラミングをやっている人だと一度は
CSSでも変数とか使えたら書くの楽なのにな
と思ったことはありませんか？
それを実現したのがSassなんです！例えばサイトでカラーコードを一定に統一したい時も、いちいちカラーコードなんて覚えてられませんよね。そこで、Sassで変数に代入しておくことによって、この悩みを解決できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* style.css */ .nav { margin:10px; background-color:#e6e6fa; } .nav ul { padding:3px 5px; } .nav ul li { list-style-type: none; font-size: 20px; border:1px solid #e6e6fa; color:#333; } |
例えばこのような形式で書くセレクタに色を指定したとします。「#333」はいいとしても「#e6e6fa」なんて覚えてられませんよね。特にこのようなカラーコードが5色とか6色以上なら尚更です。
そこでSassでこれらを変数に置き換えてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// style.scss // 変数 $lavender: #e6e6fa; $black: #333; .nav { margin:10px; background-color:$lavender; ul { padding:3px 5px; li { list-style-type: none; font-size: 20px; border:1px solid $lavender; color: $black; } } } |
先ほどの「#e6e6fa」を「$lavender」とおくことによって、より直感的にわかりやすい形に置き換えることができましたね！
これで、同じ色を使いたい場合はCSSプロパティの値で「$lavender」とおくことによって簡単に再現できます！
Sassのデメリット
CSSにコンパイルしなければいけない
ここで残念なお知らせですが、Sassは今までのCSSのようにlinkタグで読み込むことはできません。
ではどのように読み込ませるのかというと、Sassファイル(.scss)をCSSファイル(.css)にコンパイル(変換)して、変換後のCSSファイルをlinkタグで読み込みます。
HTMLやCSSを学びたてだとこのコンパイルで詰んでしまいがちです。コンパイルにはサーバー用JavaScriptのNode.jsなどを使用するのが一般的ですが、無料エディタのAtomを使った簡単なコンパイル方法がありますので、
よろしければ参考にしてみてください！
コンパイルのおすすめサイト：【超簡単！】AtomでSass（SCSS）をコンパイルできるようにしてみた
完全にSassに開発が切り替わっているわけではない
これも残念ながら、まだWebの開発現場が100%、Sassに切り替わっているわけではないんです。
開発会社によってはCSSで開発している場合があります。その場合、Sassで開発しているとWebサイトの修正などで別の会社が請負った場合、メンテナンスが困難になる可能性もあり、一概にSassで開発していいというわけではない現状があります。
BEM記法と相性がいい
CSSのクラスの付け方のルールにBEMという記法があるのですが、Sassと非常に相性がいいと言われています。
この記事ではBEMの細かい説明は省きますが、簡単にいうと入れ子の箇所を「__」でつないでいく書き方です。
どう相性がいいのか、コードをみていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* style.css */ .container { width: 80%; margin:0 auto; } .container__inner { width: 80%; } .container__inner__text { font-size: 20px; color:black; } |
これをSassで書くと、
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// style.scss .container { width: 80%; margin:0 auto; &__inner { width: 80%; &__text { font-size: 20px; color:black; } } } |
SassではBEMのような長くなるようなクラス名をいちいち書く必要は無くなりました。
これだけでもかなり開発効率が上がりますね！
まとめ
いかがでしたか？
今回はSassのメリットやデメリットに加え、従来のCSSのコードとの比較を行いました。
比較しても一目瞭然でSassの方が使いやすいと思ったと思います。(笑)
この記事でSassを使おうと思った方は早速Sassを書いてコンパイルしてみましょう！
