達成したいこと

css の作り方を考えます。
達成したいことは以下の通りです。

• Sass で効率的に。
• ブレイクポイントに基づいたレスポンシブ対応。
  ブレイクポイントは xs, sm, md, lg, xl, xxl の6パターン。
  印刷用は別途で指定。
• テーマの切り替えに対応（テーマの切り替えは body タグの class で対応）。
  テーマの class 名は lightest, light, dark, darkest の4パターン。

作りたい css

以下のような感じの css を作りたいです。

クラス名 {
 いろいろ指定(xsの場合)
}
@media (min-width: sm) {
 いろいろ指定(smの場合)
}
@media (min-width: md) {
 いろいろ指定(mdの場合)
}
@media (min-width: lg) {
 いろいろ指定(lgの場合)
}
@media (min-width: xl) {
 いろいろ指定(xlの場合)
}
@media (min-width: xxl) {
 いろいろ指定(xxl以上の場合)
}
body.lightest クラス名 {
 色だけ指定
}
body.light クラス名 {
 色だけ指定
}
body.dark クラス名 {
 色だけ指定
}
body.darkest クラス名 {
 色だけ指定
}
@media print {
 いろいろ指定(印刷用に何か指定したい場合)
}

scss ファイルの基本構成

出力したい css になるように scss を考えます。

.クラス名 {
  // ここには xs 用のスタイルを書きます

  @media (min-width: map-get($breakpoint, 'sm')) {
    // ここには sm 用のスタイルを書きます
  }

  @media (min-width: map-get($breakpoint, 'md')) {
    // ここには md 用のスタイルを書きます
  }

  @media (min-width: map-get($breakpoint, 'lg')) {
    // ここには lg 用のスタイルを書きます
  }

  @media (min-width: map-get($breakpoint, 'xl')) {
    // ここには xl 用のスタイルを書きます
  }

  @media (min-width: map-get($breakpoint, 'xxl')) {
    // ここには xxl 用のスタイルを書きます
  }

  body.lightest & {
    // ここには lightest 用のスタイル(色のみ)を書きます
  }

  body.light & {
    // ここには light 用のスタイル(色のみ)を書きます
  }

  body.dark & {
    // ここには dark 用のスタイル(色のみ)を書きます
  }

  body.darkest & {
    // ここには darkest 用のスタイル(色のみ)を書きます
  }

  @media print {
    // ここには印刷用のスタイルを書きます
  }

}

scss のルール

色は _variables.scss で定義しているテーマ毎の色を使う。

以下、検討を続けます。