css でお手軽に Text Style Theme を設定する

ひっさしぶりに scss とか sass 触った時に、Android 的な テキスト用のスタイリングをまとめる時のやり方を簡単に書く方法をメモ

$TextVariations: (
  Title: 36,
  Heading: 24,
  SubHeading: 18,
  Body: 16,
  Caption: 14,
  Hint: 12
);

$TextColors: (
  Theme: #foo,
  Default: #zoo,
  Aux: #bar
);

@each $textClass, $fontSize in $TextVariations {
  @each $colorClass, $color in $TextColors {
    %#{$textClass}#{$colorClass} {
      font-size: $fontSize;
      color: $color;
    }
    %#{$textClass}#{$colorClass}Bold {
      font-size: $fontSize;
      color: $color;
      font-weight: bold;
    }      
  }
}

と書いて
各所で

span {
  @extend %TitleDefault
}

とか書けばどこでも使える。scss って楽ンゴ。