1. 見出しを変数でスタイリング

 1// 変数を定義
 2$heading-color: #2cb8d1;
 3$heading-size: 24px;
 4$heading-weight: 700;
 5
 6// 見出しに変数を適用
 7.section-title {
 8  color: $heading-color;
 9  font-size: $heading-size;
10  font-weight: $heading-weight;
11  margin-bottom: 16px;
12  border-bottom: 2px solid $heading-color;
13  padding-bottom: 8px;
14}
15
16// サブ見出し
17.sub-title {
18  color: lighten($heading-color, 20%);
19  font-size: $heading-size - 4px;
20}