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

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

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

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

1 Sassでプロパティをネストする
2 プロパティのネスト
3 プロパティのネストを使用するかどうか
4 参考

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

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

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

プロパティのネスト

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

.box {
  border: {
    top: 2px solid #aaa;
    bottom: {
      width: 1px;
      style: dotted;
      color: #bbb;
    }
  }
  font: {
    weight: bold;
    size: 12pt;
  }
}

.to-top {
  background: {
    color: #ccc;
    position: bottom 10px right 20px;
  }
}

.box {

border: {

top: 2px solid #aaa;

bottom: {

width: 1px;

style: dotted;

color: #bbb;

}

font: {

weight: bold;

size: 12pt;

}

.to-top {

background: {

color: #ccc;

position: bottom 10px right 20px;

}

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

.box {
  border-top: 2px solid #aaa;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #bbb;
  font-weight: bold;
  font-size: 12pt;
}

.to-top {
  background-color: #ccc;
  background-position: bottom 10px right 20px;
}

.box {

border-top: 2px solid #aaa;

border-bottom-width: 1px;

border-bottom-style: dotted;

border-bottom-color: #bbb;

font-weight: bold;

font-size: 12pt;

}

.to-top {

background-color: #ccc;

background-position: bottom 10px right 20px;

}

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

.block {
  border: 1px solid #ddd {
    left: 5px solid #bbb;
    bottom: 2px solid #999;
  }
  margin: 0 20px {
    left: 10px;
  }
}

.block {

border: 1px solid #ddd {

left: 5px solid #bbb;

bottom: 2px solid #999;

}

margin: 0 20px {

left: 10px;

}

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

.block {
  border: 1px solid #ddd;
  border-left: 5px solid #bbb;
  border-bottom: 2px solid #999;
  margin: 0 20px;
  margin-left: 10px;
}

.block {

border: 1px solid #ddd;

border-left: 5px solid #bbb;

border-bottom: 2px solid #999;

margin: 0 20px;

margin-left: 10px;

}

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

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

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

参考

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

リンク