Sass：実はプロパティもネストできる。

Sassはセレクターをネスト構造にしてシンプル化できるのが魅力ですが、実はCSSプロパティもネスト構造で記述することができます。

Sass

.box {
    font: {
        weight: bold;
        size: 12px;
    }
    border: solid 1px #ccc {
        top: solid 5px #999;
    }
    background: {
        color: #eee;
        position: center center;
    }
}

出力CSS

.box {
  font-weight: bold;
  font-size: 12px;
  border: solid 1px #cccccc;
  border-top: solid 5px #999;
  background-color: #eee;
  background-position: center center;
}

ハイフンで繋がる類のプロパティはほぼ対応しています。

Sassのネスト記述でコーディング効率が高まりますが、セレクターに加えてプロパティもネスト構造にすると階層が深くなってしまい逆に見難くなったり、セレクターなのかプロパティなのかぱっと見で分かり難くもあるので、ご利用は計画的に。

（紹介しておいてなんですが、タグやセレクターのみネストし、プロパティのネストは避けた方が良いと思っています）