sass_3-3 プロパティのネスト

プロパティをネストした。

CSSとsassの比較

.sample {
  border-top: 5px solid #ccc;
  border-bottom-width: 3px;
  border-bottom-style: dotted;
  border-bottom-color: black;
}

.sample_other {
  text-shadow: 1px 1px 0 #fff;
  text-align: right;
  z-index: 5;
}

.item {
  margin: 0;
  margin-left: 10px;
  border: 5px solid #cccccc;
  border-bottom: 0;

CSSで書くとこうなるが、sassで書くとこうなる。

.sample {
  border: {
    top: 5px solid #ccc;
    bottom: {
      width: 3px;
      style: dotted;
      color: black;
    }
  }
}

.sample_other {
  text: {
    shadow: 1px 1px 0 #fff;
    align: right;
  }
  z: {
    index: 5;
  }
}

.item {
  margin: 0 {
    left: 10px;
  }
  border: 5px solid #ccc {
    bottom: 0;
  }
}

こんな感じで書けるんだろうとは思っていたけれど、実際見てみたら、一回は見ておかないと書けないなと思う部分があった。
z-indexはこんな風に書くのか。

書き方が分かれば、まとまりがはっきりしてるから分かりやすい気がするな。

参考

Sass の基本的な使い方のメモ | Web Design Leaves