【Sass】フォントサイズの各設定をグループ変数とmixinで定義して呼び出す

例えば見出しのサイズや行間などを変数だけで管理しようとすると、それぞれの変数を書く必要がある。
フォントサイズと行間やletter-spacingの数値はほぼセットでついてくるので、もう全部ひっくるめてモジュール化しちゃえばいいんじゃないかな。

もちろんタイトルとか、キャッチコピーなどの独立したテキストに関しては独自の設定が必要なわけなのですが、記事部分なんかは全部まとめておいたほうが後々楽です。
Sassで各サイズにおける設定をグループ変数とmixinで作成して、一行で呼び出します。

必要な情報（値）

• フォントサイズ（font-size）
• 行間（line-height）

※文字間（letter-spacing）も必要に応じて設定します。

グループ変数を作る

定義するサイズは次の通り。
Bootstrapとかもこんなかんじで設定してたような気がする。プロジェクトに応じて決めよう。

• 最大（xl）
• 大（l）
• 中（m）
• 小（s）
• 最小（xs）

各種設定を行うscssファイルの中に、下記のようにグループ変数を定義しておきます。私の場合はフォント関連の設定ファイル_typography.scssがあるのでそこに書きます。

$fz-base、$lh-base　はここには書いていないけどベースとなるfont-sizeとline-heigtの設定。
これをmixinで呼び出します。

3.mixinを作る

私はmixin用のファイルは別で用意しているので、そこに

こんなかんじでフォントサイズと行間の指定を変数で切り替えるように設定。$fsが変数だから、includeさせるときにここをxlとかsとかにするだけで各変数の値をとってきてくれます。

@includeで呼び出す

実際のスタイルを定義する場所に

と一行書いてコンパイルすると、それぞれに定義したfont-sizeとline-heightが設定されます。わざわざ2行書く必要もなくなるし、もしスタイルを追加削除したくなった場合もmixinの方を修正すればいいし楽ですね。

こんなかんじで「文字に関するスタイル」とか、「ボタンに関するスタイル」とか、必ずセットになっている情報はどんどんmixinでまとめちゃったほうがいいかもしれない。style.cssに実際に書くのはBlockのレイアウトスタイルや独自のフォントスタイルとかになってどんどんシンプルで見やすいですね。