CSS

CSS変数(カスタムプロパティ)とSASS変数を同時に設定すると開発が捗る?

CSS変数とSASS変数を同時に設定しておくと色々と便利かも

利点

  • autoprefixerを通すと対応していないブラウザ(IE11)はSASS変数が適応される
  • 設定の変更に強いCSSが書ける
  • 綺麗に書ける
  • なんか最先端って感じがでる

CSSの標準機能ですので、設定しておいて損は無いかなと

対応ブラウザ

主要ブラウザではIE11だけが対応してない感じです。

設定(SCSS)

連想配列(?)を使うので、SCSS記法の方が分かりやすいです。

ダークモードの作り方

この設定にしておけば、例えば途中で「ダークモードが欲しい(IEはいらない)」っとなった場合

$dark-theme-colors: (
  primary: #000000,
  // ...etc
);
body.dark-theme{
  @each $key, $color in $theme-colors {
    --c-#{$key}: #{$color};
  }
}

と記述するだけでダークモードがある程度完成します。

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ