ひっさしぶりに 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 って楽ンゴ。