BLOG
Webエンジニア2025年新卒採⽤ BRISKは新卒からリモートワークです。

Sass(SCSS記法)の書き方紹介

更新日:2021/11/17

2020年の冬からSassが社内標準として採用されました。
最初は戸惑いましたが、慣れるとCSSを書くのがつらくなるぐらい便利です。

Sassのごく一部の機能しか使っていないな、と思ったので書き方をまとめてみました。

Sassについて

Sass(Syntactically Awesome StyleSheet)はCSSのメタ言語です。CSSのメタ言語をCSSプリプロセッサと呼んだりします。
メタ言語は言語を定義したり、言語についての情報を記述したりするための言語です。CSSの機能を拡張した言語の1つがSassと言えます。

SassはCSSに変換(コンパイル)する必要があります。環境構築が面倒という方もGUIコンパイラやVSCodeのプラグインなどを使えば、気軽にSassを導入できます。
GUIコンパイラの使い方については、こちらの記事を参考にしてみてください。

Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(基礎編)

SASSとSCSS

SassにはSASS、SCSSと2種類の記法があります。それぞれ拡張子が.sass、.scssです。

SASS記法は以下のように書くことができます。

・波括弧({})の代わりにインデントを使用する
・セミコロン(;)を省略できる

しかしCSSとの互換性がないためあまり普及せず、SCSS記法がよく使われている印象です。

上がSASS記法で、下がSCSS記法のコードです。SCSS記法の方がCSSのように書けるのでしっくりきますね。
この記事ではSassの構文などをSCSS記法で紹介していきます。

ネスト

以下のコードのように同じセレクタを何度も書くことはないでしょうか。

毎回書くの手間だなと思われたことはないでしょうか。
そんなときSassだと以下のように記述できます。

楽ですね!!!
同じセレクタを何度も記述する必要がなくなり、HTML構造が把握しやすくなりました。
クラスの変更があっても、一カ所変更したのでOKです。

ただ、以下のようにネストが深くなりすぎないように気を付けてください。

HTML構造に従って記述していくと、ネストがどんどん深くなってしまいます。
個人的には、3~4つネストするのが限度かと思います。

ネストの階層が深すぎると、どのスタイルが当たっているかコードを追うのが大変です。
使える場所も限定されてしまうので、コンポーネントとして流用したいときに使いづらくなります。

階層があまりに深くなるようでしたら、セレクタの指定を見直してみてください。
以下の点を疑ってみるといいと思います。

・HTML構造に完全に沿ってネストしていないか
・コンポーネントとして外に出せないか

筆者なら以下のように書きます。
これが正解というわけではありませんが、先ほどよりはコードが見やすくなったのではないでしょうか。

子セレクタ・隣接セレクタ

CSSでは子セレクタ(>)・隣接セレクタ(+)を以下のように書きます。

Sassだと以下のように記述できます。

親のセレクタに関係あるスタイルがまとまって、スタイルの把握がしやすい気がします。
反対に記述が増えて見づらいと思った場合は、ネストせずにCSSの記述に戻しましょう。

メディアクエリ

レスポンシブ対応でメディアクエリを使用すると思います。

指定するセレクタが増えていくとメディアクエリでの記述と通常の記述の位置が離れて、スタイルの把握しにくいときがあります。
そんなときSassだと以下のように書けます。

このコードをコンパイルすると先ほどのCSSが出力されます。
Sassだと上記のようにセレクタ内にメディアクエリを記述できるので、そのセレクタに対する全てのスタイルを把握しやすくなります。

親セレクタの参照

&(アンパサンド)で親セレクタを参照できます。
よく使う例としては疑似クラス・疑似要素・複数クラスではないでしょうか。
他にも親セレクタの前にセレクタを追加することもできます。

コンパイルすると以下のようになります。

また、この記述はBEMというCSS設計だと威力を発揮します。

BEMは「Block__Element–Modifier」という命名規則なので、ブロックが何度も出てきます。
それを&で参照することで、何度も書く手間を省くことができます。

ただこの方法は賛否両論あります。
クラス名「media__item」でSass内を検索してもヒットしないからです。

このような記述をすると、複数人で作業する場合は余計な混乱を生みかねないです。

・BEMでクラスをつけることが標準である
・BlockなどのコンポーネントごとにSCSSファイルを分割して記述するようになっている

など上記のようにルールが決まっている場合は使用しても問題ないと思いますが、そうでないならこの方法は見送ったほうがいいかもしれません。

プロパティのネスト

プロパティもネストできます。例えばfont-weight、font-family、font-size等は「font-」が共通ですよね。
これを以下のようにまとめることができます。

現在ではEmmetが普及し、スタイルを書くのが楽になりました。
なのであまり使用するケースは少ないと思いましたが、紹介させていただきました。

Emmetについて知りたい場合はこちらの記事もどうぞ。

Emmet(エメット)でHTMLとCSSを効率的にコーディングする

コメント

1行のコメントは//コメントで、複数のコメントは/* コメント */で、記述できます。

1行のコメントはCSSにコンパイルすると、出力されません。
複数行はCSSコメントとして出力されますが、圧縮モードでコンパイルした場合は出力されません。
圧縮モードでCSSコメントを表示したい場合は「/*」を「/*!」にしてください。

変数

よく使う値を変数として格納できます。
CSSにも変数はありますが、IEが対応していないのでSassの変数を使うことが多いです。
$変数名: 値;で変数を定義できます。

コンパイルすると以下のコードのようになります。

サイトのイメージカラーなど変数としてまとめておくと便利です。

ちなみにcal()内にSassの変数を使おうとすると、エラーになってしまいます。
このように変数が参照できないときは、以下のように#{$変数名}と記述すると展開されます。
これを補完(インターポレーション)と言います。

モジュール

1つのCSSファイルで複数人が作業すると、競合が起きる可能性が高くなります。
またページ数が多いと、コード量が膨大に膨れ上がっていきます。

それを解決しようと複数のCSSファイルに分割すると、ファイルが増えた分リクエストが増えてしまいます。

それを解決しようと、CSSの@importでファイルを読み込もうとするかもしれません。

ですがこれは逆効果です。

①の場合は、複数のCSSファイルを同時に読み込んでいます。しかし@importを使った②の場合は、CSSを上から順番に読み込んでいきます。
ですので①の場合よりも読み込み時間が遅くなってしまいます。

Sassなら分割したファイルをモジュールとしてインポートしつつ、1つのCSSファイルにまとめて出力できます。

これらのSCSSファイルをコンパイルすると、以下のCSSファイルのみが出力されます。

ファイル名の先頭に_を付けるとそのSCSSファイルはCSSファイルとしてコンパイルされず、モジュールとして扱われます。
このように、コンパイル後に余計なCSSを生成しないようにする機能をパーシャルと言います。

Dart SassとLibSass

以前は@useの代わりに@importを使用していましたが、それが廃止になるということで一時期話題になりました。
それに伴いLibSassが非推奨になり、Dart Sassへの移行が勧められています。

これから新しくSassを始める方はDart Sassを使用するのが良いと思います。

スタイルの継承

あるクラスに別のクラスの全てのスタイルと、そのクラス独自のスタイルを指定したいときがあります。
そんなとき下記のコードのように書くことが多いです。

①特定のクラスを付与していたら、追加のスタイルを記述する
②ベースのクラスから派生したクラスに追加のスタイルを記述する