CSSの記述を効率化し、メンテナンス性も向上するSassの導入から基本的な使い方までまとめました。
対象の方は下記のとおりです。
- Sassで書きたいけどコンパイルがよく分からない
- Sassをコンパイルできるようになったけど、書き方が分からない
- CSSはある程度理解できたので次のステップに進みたい
SassはCSSを拡張した言語なので、まずはCSSをある程度扱えるようになってからSassに挑戦した方がいいでしょう。
では、1つずつご紹介していきます。
Sass(サス)とは
Sassとは、CSSのメタ言語と呼ばれるもので、普通にCSSを記述する場合と比べると下記のようなメリットがあります。
- 作業効率が向上する
- コードの記述量が減る
- コードのメンテナンス性が高まる
Web制作の現場ではCSSをそのまま記述するのではなく、SassのようなCSSのメタ言語を使用することが当たり前になっています。
ある程度CSSの知識を持っていないとSassを使いこなすことはできないので、初心者の方はCSSから覚えていかなければなりませんが、ある程度CSSの知識が付いてきたらSassに挑戦してみるのがいいでしょう。
Sassを使うための準備
Sassで書いたスタイル定義は.scss、もしくは.sassという拡張子のファイルに保存します。しかし、HTMLから直接Sassのファイルを読み込むことはできないので、「コンパイル」という処理を行ってCSSファイルに変換しなければなりません。
コンパイルは少し技術的な知識が必要となりますが、Visual Studio CodeやPrepropsなど、初心者でも簡単に使えるツールを使えばそこまで難しくありません。
詳しくは下記のページでご紹介しています。
SCSSとSASS
Sassには、「SCSS」と「SASS」という2つの記法があります。どちらも使える機能やできることに違いはありませんが、書き方が異なります。
例えば、
.box .item {
font-size: 20px;
font-weight: bold;
}
というCSSを書きたい時は、それぞれ下記のようになります。
■SCSS
.box {
.item {
font: {
size: 20px;
weight: bold;
}
}
}
■SASS
.box
.item
font:
size: 20px
weight: bold
上記のように、SCSSはCSSによく似た形で記述を行います。一方で、SASSは括弧やセミコロンが無く、CSSとは少し異なる形でコードを記述します。
普段CSSを書いている人にとっては、SASSはあまり見慣れない形式だと思います。コードが短くなるというメリットがありますが、少し読みづらいという意見も多いのがSASS記法の特徴です。
一般的にはSCSSが使われているため、以下ではSCSSを使ってご説明していきます。
Sassの基本的な使い方
では、CSSではなくてSassでスタイルを定義することによって使うことのできる便利な機能をご紹介していきたいと思います。
ネスト（入れ子）
Sassを使うと、スタイル定義をネストして記述することができるので、コード的にも見やすく、かつ記述量を減らすことができます。
慣れるまでは少し違和感を感じるかもしれませんが、慣れてしまえばCSSよりも分かりやすく、管理の行き届いたコードを書くことができるようになります。
何より、コードの記述量を減らすために一番役立つのがネストで、これによって作業効率を大きく向上させることもできます。
一言にネストと言っても、いくつかの種類に分かれています。
セレクタのネスト
セレクタのネストというのは、.container .item .boxのように入れ子になっているセレクタにスタイルを当てる場合に使用します。
SCSSでは、下記のようにセレクタをネストさせて記述することができます。
.container {
padding: 20px;
.item {
margin-left: 30px;
.box {
color: red;
}
}
}
.containerセレクタの中に.itemセレクタがあり、さらにその中に.boxセレクタが書かれていますね。
これをコンパイルすると下記のようなコードになります。
.container {
padding: 20px;
}
.container .item {
margin-left: 30px;
}
.container .item .box {
color: red;
}
このように、子孫セレクタを指定してスタイルを定義する場合は、親セレクタの括弧の中に子セレクタを設置することによって記述することができます。
プロパティのネスト
例えば、下記のようなコードがあるとします。
.box {
font-size: 16px;
font-weight: bold;
font-family: "Noto Sans JP", sans-serif;
}
Sassの場合は、下記のように記述することができます。
.box2 {
font: {
size: 16px;
weight: bold;
family: "Noto Sans JP", sans-serif;
}
}
font-*のプロパティをネストでまとめることによって、記述量を減らすことができ、さらにfontに関するスタイル定義をまとめることができるので、直感的に分かりやすくメンテナンス性も向上します。
もちろん、fontだけではなく、backgroundやborderなど、様々なプロパティをネストして記述する事が可能です。
親セレクタの参照
例えば、.container.itemのように複数クラスを指定してスタイルを記述する場合があると思います。そのような場合は、下記のように記述します。
.container {
&.item {
color: red;
}
}
単純にセレクタをネストする場合は「&」無しで記述していましたが、親セレクタを参照する場合は「&」を先頭につけて記述します。
「親セレクタの参照」という言葉のせいで難しく感じるかもしれませんが、簡単に言ってしまえば下記のようになります。
- &マークなし
- 親セレクタと子セレクタの間に半角スペースが1つ作られる
- &マークあり
- 親セレクタと子セレクタの間にスペースが作られない
使っているうちに慣れてくると思いますが、最初は上記のように覚えておくといいでしょう。
ネストの注意点
ネストは何重にも作ることができますが、あまりネストが深くなってしまうと生成されるCSSのコードが複雑になってしまうため、あまり深く作らない方がいいです。
おそらくSassを書いているうちに感覚がつかめてくると思いますが、最初はあまり深くネストしすぎないように気を付けて書いてみてください。
変数を使う
CSSでも変数を使うことはできますが、一部のブラウザで対応していないなど、実際の案件であまり使われることはありません。
しかし、Sassを使えばブラウザに依存せず変数を使ってスタイル定義を行うことができます。
変数を使うメリット
変数を使うことによって、どのようなメリットがあるのでしょうか。
変更に強いコードが書ける
変数を使用することによって、変更に強いコードを記述することができます。
例えば、メインカラーを$main-colorのような変数に指定しておけば、後で色の変更が入った場合でも変数の値を書き換えるだけで済むため、時間をかけずに修正することができますね。
複数人での作業が行いやすくなる
変数を外部ファイルで指定しておけば、チームで作業する場合に非常に役立ちます。
Sassには外部のSassファイルをインポートすることができるため、共通して使用するファイルにグローバル変数を定義しておき、それを読み込むようにしておけば全員同じ環境でコーディングを行うことができますね。
変数の使い方
変数を使えるようにするために、まずは変数の定義を行います。「$」を頭に付けることで、変数を宣言できます。
$main-color: #123456;
.box {
background: $main-color;
}
上記のコードをコンパイルすると、下記のようなCSSが出力されます。
.box {
background: #123456;
}
で$main-colorとして定義したカラーコードが.boxのbackgroundの値に入っていますね。
カラーコードやフォントファミリー、ブレークポイントなど、何度も使用するような値は変数として宣言しておくと、作業効率とメンテナンス性が向上します。
よく使われるSassの変数
では、実際にSassの変数はどのような場面で使われるのでしょうか。良く使われる例をご紹介します。
ブレークポイント（メディアクエリ）
ブレークポイントを変数として宣言しておくと、いちいち数値を手で打ち込む必要がなくなるため、ブレークポイントの数値を覚える必要がなくなり、ミスも防ぐことができます。
$breakpoint-small: 600px;
$breakpoint-large: 960px;
@media screen and (max-width: $breakpoint-small) {
....
}
@mixinを使ってさらにブレークポイントを管理しやすくするテクニックもありますが、まずはブレークポイントの変数化ができるということを押さえておきましょう。
色の定義
スタイルガイドやデザインシステムによって予めカラーが定義されている場合は、それを変数として宣言しておきましょう。
カラーコードを変数として使用する場合は、下記のような記述となります。
$primary: #123456;
$secondary: #234567;
$accent: #345678;
.box {
background-color: $primary;
}
こうすることによって、カラーが変更された時も一箇所修正すれば対応することが可能になります。
フォントファミリー
フォントファミリーも使用する場所で毎回同じ記述をするのはあまり得策ではありません。
$font-family : "Noto Sans JP", sans-serif;
.box {
font-family: $font-family;
}
もちろん、bodyでフォントファミリーを一括指定する場合は必要ありませんが、サイト内で複数のフォントファミリーを使用している場合は変数によって管理すると便利です。
まとめ
今回ご紹介したSassの書き方は基本的なものですが、これだけでもそのままCSSを書く場合と比べればコードの記述量を減らすことができ、メンテナンス性も向上させることができます。
この他にも、@extendや@mixinなどさらに便利なルールが用意されています。
まずは基本を押さえて、Sassに慣れるところから挑戦してみてください。
