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

goto_jp 423views 更新:2014年4月18日

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

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません