Sassでプロパティのネスト(Nested Properties)を使用する

Sass ロゴ

Sassでルールのネストをする方法については、前々回に紹介しました。

Sassでルールのネスト(Nested Rules)を使用する
ルールのネストは、Sassを記述する上で、最も使用する機能です。 Sassではルールをネストできることで、スタイル(CSS)をHT...

Sassではルールセットのネストだけではなく、プロパティのネストを行うこともできます。

そこで今回は、プロパティのネストについて紹介します。

Sassでプロパティをネストする

「プロパティのネスト」と言われても、すぐに想像できないかもしれません。
Sassでプロパティのネストをするというのは、CSSのショートハンド(一括指定)で記述するプロパティのネストになります。

ショートハンドで記述できるプロパティとは、例えば
padding-top
margin-left
list-style-type
border-top-style
などのプロパティ名に(ハイフン)を含むものです。

プロパティのネスト

プロパティのネストでは、:(コロン)の後に{ }(波括弧)を記述することで、以下のようにスタイルを定義できます。

上記のSassをCSSに変換すると以下のようになります。

上記の例では、:(コロン)と{ }(波括弧)の間には何も記述していませんでしたが、プロパティの値を記述することもできます。

上記のSassをCSSに変換した結果は次のようになります。

上記の例ではborderプロパティとmarginプロパティにショートハンドの値を指定し、プロパティのネストを使用して一部のプロパティ(border-leftborder-bottommargin-left)の値を上書きしています。

プロパティのネストを使用するかどうか

プロパティのネストは、ルールのネストと同様にコード量を減らすことができますので、コーディングの効率を高めることができます。
しかし、ネスト構造にすることで階層が深くなりコードの可読性が低くなる可能性があります。
また、ルールのネストとプロパティのネストのどちらなのかが一見してわかりづらい側面もあります。
ですので、プロパティのネストはプロジェクトやチームのコーディングルールと照らし合わせた上で使用されることをおすすめします。

参考

本記事の執筆には、以下の書籍を参考にさせていただきました。
「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」は、Sassを学習するのであれば、是非手元に置いておきたい1冊になります。