Sassでfont-sizeやline-heightなどを変数で一元管理するコツ

font-sizeやline-hieghtなどの値をSassで一元管理するためのコツを紹介します。

 

Sassによる一元管理のコツ

普通にCSSでfont-sizeやline-heightなどの値を書くときはその都度指定しますが、なんの統一性もなくそのまま書いていると見にくい上、修正が必要になった際に全て書き直さないといけないのでかなり面倒です。

 

そこで、Sassの変数やミックスインを使って必要になりそうな値を書き出し、一括で管理できるようにまとめます。

例えば、見出しやタイトルなら「title-lv1」、本文なら「sentence-lv1」といったクラスを振ってもいいし、ミックスインでfont-sizeやline-heightを一つにまとめてしまうのもいいですね。

.title-lv1 {
  font-size: 3rem;
  font-weight: bold;
}
.sentence-lv1 {
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: 0.01rem;
}

 

ファイルの途中途中で変数やミックスインが定義されるとコードの見通しが悪くなるので、専用のファイルを作ってそこで一括にまとめてしまうといいでしょう。

FLOCSSなどの設計をしているならクラスに必要な値をまとめると、次回からそのクラスを振るだけで勝手に調整されるのでかなり便利です(いわゆる再利用性というやつです)。

 

必要な値を一元管理するために

デザインデータは大体把握しておくようにしましょう。

必要な値はデザインデータに書かれているはずなので、それを元に必要な値を書き出していきます。

 

一度定義してしまえばずっと使い回すことができる上、修正が入っても一箇所書き換えればいいだけです。

コードがかなりスッキリする上、修正にもかなり強くなります。