[Sass]for文とif文を使って見出し要素のCSSを一括で設定する。

見出し要素は出現頻度が高く、無計画にcssを記述していると乱雑になりやすいのでひとまとめに管理する記述する方法を考えてみました。タイトル通りSassのfor文とif文を使います。

Sass

body{

	$reduce : 0.2; //フォントサイズを0.2ずつ源算するための値
	$fontSize : 3 + $reduce; //フォントサイズの初期値

	//$valueに1ずつ加算して代入し、6になるまで繰り返す  
	@for $value from 1 through 6 {

		h#{$value}{ //#{}を使用して見出しセレクタを作成

			//フォントサイズを再設定
			$fontSize: $fontSize - $reduce; //0.2ずつ源算
			font-size: $fontSize + rem;

			//h2要素のcssを設定
			@if $value == 2 {
				color: red;
			}

			//h3要素のcssを設定
			@if $value == 3 {
				color: blue;
			}

			//class付きh4要素にcssを設定
			@if $value == 4 {
				&.h4-custom {
					border-bottom: 1px solid #CCCCCC;
				}
			}

		}

	}

}

＠forでh1からh6までのフォントサイズを調整し、@ifで条件分岐して見出しごとのスタイルを設定しています。より複雑なスタイルを施したい場合は別途@mixinを作って@includeすればさらに管理しやすくなりますね。