CSS3のvar()を使用して実行時にscss変数の値を変更する詳細な説明

var() の紹介と使用法

詳細 (MDN) IEは無効ですが、他の主流のブラウザは有効です

var() の使用法

{} 内でのみ宣言可能で、スコープは {} のセレクタによって決定されます。

<!-- 免責事項-->
体{
  --name:value; // 本文で有効}


<!-- 使用法 -->
。テスト{
  attr: var(--name,defaultValue) //--nameが存在しない場合はdefaultValueを使用する
  
  var(--name):#369;//間違った使い方}

CSS のネイティブ変数定義構文は –* で、変数使用構文は var(–*) です。ここで、* は変数名を表します。

ただし、$、[、^、(、% などの文字を含めることはできません。通常の文字は「数字 [0-9]」、「英字 [a-zA-Z]」、「アンダースコア _」、「ハイフン -」の組み合わせに限られますが、中国語、日本語、韓国語は使用できます。

実行時にSCSS変数値を変更する

この方法は、scsss変数の値を直接変更しませんが、同じ効果を実現できます。変数で複数の属性を制御する方が効率的で簡潔です。単一の変数を使用して単一の属性を制御する必要はありません。この方法は、スタイル属性を変更するだけです。1対1は、スタイルに属性を記述するのと同じです。

原則(英語)

簡単に言えば、scss変数はcss変数によって制御されます

$色: (
  プライマリ: #FFBB00、
  セカンダリ: #0969A2
);

セレクタ1{
  @each $name、$colors 内の $color {
    --color-#{$name}: $color;
  }
}

<!-- セレクタ1の生成効果-->
：根 {
  --color-primary: #FFBB00;
  --セカンダリカラー: #0969A2;
}


<!-- 使用方法 1: CSS 変数を直接使用する -->
セレクタ{
  色:var(--color-primary);
}

<!-- 使用法 2 では、scss 構文の推奨事項に準拠するために scss 関数を使用します -->  
@function color($色名) {
  @return var(--color-#{$color-name});
}

体 { 
  color: color(primary); //使用}

<!-- ボディ生成効果 -->
体 { 
  color: var(--color-primary); //これはjsで設定できます}

jsはcss変数を設定します。つまり、scss変数を設定して実行します。

domObject.style.setProperty(name,value); //name は CSS 変数名です。例: --color-primary

今のところ、scss での変数値の実行時変更は完了しています。具体的な適用シナリオについてはよくわかりませんが、遭遇しました。

私のアプリケーションシナリオ:

カスタムコンポーネントは、テーマと同様に、ユーザーが自由に調整できるようにいくつかのスタイルプロパティを公開する必要がありますが、文字列の連結を使用してそれを完了したくありません。これは無駄が多すぎます。値が変更されるたびに、スタイル全体を書き換える必要があり、これには DOM の頻繁な変更が伴いますが、これは Vue の考え方と一致しておらず、CSS で直接記述するのは面倒すぎます。

そのため、私はスタイルを記述するために SCSS を使用します。SCSS のネストは本当に使いやすいです。LESS はネストされた属性をサポートしていないため、非常に使いにくく、SCSS ほど簡潔ではありません。
scss はプリコンパイルされているため、実行時に変数値を変更できず、変更する必要があるため、Google で検索して満足のいく解決策を見つけました -> 原則 (英語)

特別な注意

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

[データ-v-1374924e]:ルート{
  --test:100px;
}

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

したがって、vueファイルでは、CSS変数宣言のセレクタスコープを慎重に検討して、無効な変数を避けてください。

CSS3のvar()を使用して実行時にscss変数の値を変更する方法についての記事はこれで終了です。CSS3でscss変数の値を変更する方法についての詳細は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします！

<<: ウェブページにコンテンツが多すぎる場合に、下から上へ素早く戻る方法

>>: MySQL で CURRENT_TIMESTAMP を使用する方法