06
cssを作り方を考え中
【作成日】 2021/08/17 0:30 【更新日】
達成したいこと
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 を考えます。
sample.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 で定義しているテーマ毎の色を使う。
以下、検討を続けます。