[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。

var()の導入と使い方

詳細（MDN） IEでは無効、その他の主要ブラウザでは有効

var() を使用します。

の中でしか宣言できず、スコープは{}のセレクタによって決定されます。

<! -- Declaration -->
body{
  --name:value;//valid within body
}


<! -- use -->
.test{
  attr: var(--name,defaultValue) //use defaultValue when --name does not exist
  
  var(--name):#369;// Wrong way to use
}

CSSのネイティブな変数定義の構文は以下の通りです。-*であり、変数の使用構文は var(-*) で、ここで * は変数の名前を示します。

ただし、$、[ 、^、( 、%などの文字を含むことはできません。一般的な文字は、quot;数字 [0-9]", "letters [a-zA-Z]", "underscore_", "short horizontal line -" に限られ、中国語、日本語、韓国語が使用できます。

実行時にscss変数の値を変更する

この方法は scsss 変数の値を直接変更するものではありませんが、同じことをするもので、ひとつの変数で複数のプロパティを制御する必要がある場合に、より効率的で簡潔な方法です。
この方法は、style属性を変更するだけで、その属性を自分の間のstyleに書き込むのと同じです。

プリンシプル（英語）

簡単に言うと、scss 変数を css 変数の制御下に置くということです。

$colors: (
  primary: #FFBB00,
  secondary: #0969A2
);

Selector1{
  @each $name, $color in $colors {
    --color-#{$name}: $color;
  }
}

<! -- Selector1's generated effect -->
:root {
  --color-primary: #FFBB00;
  --color-secondary: #0969A2;
}


<! -- Usage 1 Direct use of css variables -->
Selector{
  color:var(--color-primary);
}

<! -- Usage 2 Use scss functions to conform to scss syntax Recommended -->  
@function color($color-name) {
  @return var(--color-#{$color-name});
}

body { 
  color: color(primary); // use
}

<! -- body generate effect -->
body { 
  color: var(--color-primary); // so it can be set by js
}

js set css variables, i.e. set running scss variables

domObject.style.setProperty(name,value);//name is the name of the css variable e.g: --color-primary

これでscssの実行時の変数値変更は完了です、正確な応用シナリオは分かりませんが、今、出会いました。

私のシナリオ

カスタムコンポーネントは、テーマと同様に、ユーザーが自由に調整できるようにいくつかのスタイルプロパティを公開する必要があり、私はそれを行うために文字列ステッチを使用したくない、それはあまりにも無駄だ、値を変更した後に毎回一度に全体のスタイルを書き換える必要があり、これはドムに頻繁に変更を伴うが、vueの考え方に準拠していない、直接CSSで書くことはあまりにも退屈です。

だから、私はスタイルを書くためにscssを使っています、scssのネストは本当に良いですが、lessはプロパティの再ネストをサポートしていません、それは非常に不快で、scssのように簡潔ではありません使用します。
scssはプリコンパイルされているので、実行時に変数値を変更することができず、変更する必要があるので、ググってみたら、納得のいく解決策が出てきました -> プリンシプル（英語）

特記事項

単一ファイルのコンポーネント (.vue) で scoped を使用すると、 :root や :body などのセレクタが期待どおりに動作しなくなります。

[data-v-1374924e]:root {
  --test:100px;
}

この場合、ルートが存在しないため、変数 -test はまったく見つからず、vue コンポーネントのスコープ付き機能はこのコンポーネントに対してのみ有効ですが、コンポーネントには完全なドキュメントがない、つまりコンポーネント内にルートが存在しないためです。

そのため、vueのファイルでは、css変数宣言のセレクタスコープをよく考えて、変数を無効にしないようにします。