はじめに

改めてsassの便利さを知る

プロパティのネスト

ネストはルールセットだけではなく、プロパティもネストすることができます。 ショートハンドでかけるプロパティで使うことができ、「-」があるプロパティは全てネストできます。 ▼SCSS
.sample-01 {
  border: {
    top: 1px solid #fff;
    bottom: 1px dotted grey;
  }
}

.sample-02 {
  padding: {
    top: 70px;
    bottom: 70px;
  }
}

.sample-03 {
  margin: 0 {
    left: 20px;
  }
}
▼CSS(コンパイル後)
.sample-01 {
  border-top: 1px solid #ffffff;
  bordewr-bottom: 1px dotted grey;
}

.sample-02 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.sample-03 {
  margin: 0;
  margin-left: 20px;
}

▼SCSS

 
▼CSS(コンパイル後)


さいごに

参考ページ