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

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 を使用する方法

推薦する

MySQLのグローバルロックとテーブルロックに関する詳細な理解

序文ロックの範囲に応じて、MySQL のロックは、グローバル ロック、テーブル ロック、行ロックに大...

Nginxドメイン名転送の実装

Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...

CSS のインライン スタイルに変換するソリューション (css-inline)

シーンについて話すメールを送信サードパーティのウェブサイトにHTMLを埋め込む他の編集者の記事をコピ...

Ubuntu 20.04 に GitLab をインストールして設定する方法

導入GitLab CE または Community Edition は、主に Git リポジトリのホ...

XHTML の一般的な構造タグ

構造本文、見出し、HTML、タイトル文章abbr、頭字語、アドレス、引用ブロック、br、引用、コード...

MySQL 5.7.17 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...

VMware15 の Deepin インストール詳細チュートリアル (画像とテキスト)

序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...

プレーヤー機能を実現するためのvue + element uiのサンプルコード

効果画像のない表示は単なる空虚な言葉です。 1. オーディオをベースにし、elementUI と組み...

MySQL infobrightのインストール手順

目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...

CSS フロントエンドの知識ポイントのまとめ(必読)

1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...

Linuxカーネルスケジューラソースコード初期化の分析

目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...

MySQL グローバルロックとテーブルレベルロックの具体的な使用法

目次序文グローバルロックテーブルロックテーブルロックメタデータ ロック (MDL ロック)要約する参...

mysql5.6 以前のデータベースで json をクエリする方法

MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...

5分でDockerを使ってRedisのクラスターモードとセンチネルモードを構築する方法を教えます

目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...

ウェブデザインにおける装飾要素の応用の概要

<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...