0

ダーク モードを実装しようとしていますが、CSS 変数を使用して、ライト/ダーク モードが有効かどうかに応じて色を簡単に変更できるようにしたいと考えています。prefers-color-schemecss 変数の色の変化を表示するために、メディア クエリを使用しています。

私が直面している問題は、私が取り組んでいるプロジェクトに、ベース ブートストラップ テンプレート内の数千のプロパティと数十のファイル内に表示される多くの sass 変数が含まれていることです。

CSS変数値を持つようにsass変数を更新しようとしました。たとえば$primary = var(--color-primary)、これは機能しません。

これらの SASS 変数を CSS 変数にリダイレクトして継承する方法はありますか?

基本のブートストラップ テンプレートをいじりたいとは思っていません。混乱しやすく、維持するのが難しいからです。variables.scss理想的には、ファイルを編集したいだけです。

本当にありがとう！

4

1 に答える 1

-1 
// _variables.scss


// colors
$gin:#EDF5EE;
$linen:#FCF4EC;
$white:#FFFFFF;
$zircon:#EBF3FE;
$goblin:#00803C;
$cinnabar:#DC0700;

$colors: () !default;

$colors: map-merge(
  (
    "gin": $gin,
    "white": $white,
    "linen": $linen,
    "goblin": $goblin,
    "zircon": $zircon,
    "cinnabar": $cinnabar,
  ),
  $colors);

:root {
  --gin: #{$gin};
  --white: #{$white};
  --linen: #{$linen};
  --goblin: #{$goblin};
  --zircon: #{$zircon};
  --cinnabar: #{$cinnabar};
}



// Credit: https://github.com/lawrenceadu
于 2021-03-12T21:31:00.900 に答える