私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。
私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。
そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。
Sassとは何か
この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひとつです。
Sass以外にもLESSなどさまざまなCSS拡張メタ言語が存在しますが、アンケート結果を見る限り多くの方はSassを使用しています。
ここからはSassを導入するにあたって、多くの方が不安に思うであろうことについて書いています。
普通のCSSと書き方が違うのではないか
私がはじめてSassを知った時に最初に感じた不安がこれでした。
その頃はまだSassが生まれたばかりで、「SASS記法」という通常のCSSとはまったく記述方法が異なる書き方しかありませんでした。
/* CSSの記法 */
.logo {
color: orange;
}
// SASS記法
.logo
color: orange
しかし、現在は「SCSS記法」というCSSと同じ書き方でSassを記述できます。
/* CSSの記法 */
.logo {
color: orange;
}
// SCSS記法
.logo {
color: orange;
}
※これ以降、この記事ではSCSS記法でSassを記述します。
変数はCSSでも使えるので不要ではないか
私がSassを知った頃にはまだ、CSSに変数の機能は導入されていませんでした。
しかし、現在のWebブラウザーではIE11を除き変数を使用できます。
IE11はまだ切り捨てるには少し早いということもありますが、CSSの変数機能は残念ながら分かりやすい、書きやすいとはいえません。
/* CSSの変数定義 */
:root {
--bg-color: #c02121;
}
/* 変数の使用 */
.header {
background-color: var(--bg-color);
}
それに対して、Sassの変数機能は他のスクリプト言語と似ていて、とても分かりやすく書きやすいです。
// Sassの変数定義
$bg-color: #c02121;
// 変数の使用
.header {
background-color: $bg-color;
}
そもそもなぜCSSに変数が必要なのか
たとえばサイトのテーマカラーやコーポレートカラー、アクセントカラーなどはカラーコードで書くよりも、変数として記述しておくとコードが見やすくなる上に、もし色が変わったときも安全に置換することができます。
ルールセットのネストは必要ないのではないか
CSSのルールセットというのは、セレクターと波括弧の部分を含めた全体のことを指します。
私がSassを知ったばかりの頃、Sassのルールセットのネスト機能をとてもプッシュしている方が多かったと記憶しています。
ルールセットのネストとは
たとえば通常のCSSで、ヘッダーの中にあるロゴは以下のようにセレクターを指定できます。
.header .logo {
}
それに対してSassの場合はCSSと同じ方法で指定できるだけでなく、以下のようにルールセットをネストできます。
.header {
.logo {
}
}
私がはじめてSassを知った時このようなコードを見て、ネストするメリットが理解できませんでした。
Sassをすぐに使用しなかったのは「ルールセットをネストする必要性が分からない」というのがとても大きかったです。
その後Sassについて改めて調べていた時、たとえば以下のように、a要素にマウスオーバーした時のスタイルを一箇所にまとめて書くことでコードが少し見やすくなるということに気づきました。
// Sassでa要素の文字色を青、マウスオーバーしたときの文字色を赤に指定
a {
color: blue;
&:hover {
color: red;
}
}
/* CSSにコンパイルしたもの */
a {
color: blue;
}
a:hover {
color: red;
}
メディアクエリが見やすくなる
たとえば、「CSSでメディアクエリを使用して、スマートフォンとPCで見た目を変えたい」という場合、以下のように別々に書く必要があります。
以下は、ヘッダー部分の左右のpaddingの値をスマートフォンとPCで変更する場合の例です。
/* スマートフォン用 */
.header {
padding: 0 2%;
}
/* タブレット・PC用 */
@media (min-width: 768px) {
.header {
padding: 0 1%;
}
}
Sassの場合ネストを使用してこのようにメディアクエリをルールセットの中に書くことができ、だいぶコードが見やすくなるということに気づきました。
.header {
padding: 0 2%;
@media (min-width: 750px) {
padding: 0 1%;
}
}
さらに、Sassのmixinという機能を使用すると以下のようにシンプルに書くことができます。
「タブレット・PC版の場合」というコメントがなくてもコードが見やすくなったことがわかるかと思います。
※別途mixinの定義が必要です。
.header {
padding: 0 2%;
@include pc {
padding: 0 1%;
}
}
レスポンシブWebデザインでWebサイトを作る場合、メディアクエリを何度も書く必要がありますが、後々管理が大変になります。
Sassを使用することで管理しやすく、また関連があるものを近くに書くことができる（たとえばスマートフォン版の.headerのpaddingとPC版のpaddingを近くに書くことができる）ためコードが見やすくなります。
私がSassを導入することを決めたのは、上記のようなコードを書けるということに気づいたときでした。
Sassを気軽に試したい方は
「Sassをコンパイルするためのアプリケーションやパッケージなどをインストールしていないけれど、Sassを少しだけ試してみたい」という方にはSassMeisterがおすすめです。
以下のページをブラウザで開き、左側にSCSSの記法でコードを書くと、すぐに右側にCSSに変換されたものが表示されます。変換されたコードはコピーすることもできます。
SassMeister | The Sass Playground!
Sassについて実践的に学びたい方は
すでにHTML・CSS・レスポンシブWebデザインなどが分かる方向けには「1日でわかるSassとBEM講座」を開催しています。次回は2019/11/10（日）開催です。
スマートフォンに対応したHTML・CSS・レスポンシブWebデザインを基礎からしっかり学びたい方向けには「スマートフォン時代のWebコーディングスクール」を開催しています。こちら10月18日から開催します。
初回体験レッスンを動画で受講することも可能です。
