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

推薦する

Linux カーネル デバイス ドライバー カーネル リンク リストの使用上の注意

/******************** * カーネルにおけるリンクリストの応用********...

MySQL データベースの詳細な説明 (Ubuntu 14.0.4 LTS 64 ビットベース)

1. MySQLデータベースの構成と関連概念まず、MySQL はリレーショナル データベースである...

mysql 5.7.18 winx64 無料インストール設定方法

1. ダウンロード2. 減圧3. パス環境変数を追加し、mysqlが配置されているbinディレクトリ...

Linux dateコマンドの知識ポイントのまとめ

使用法: date [オプション]... [+フォーマット]または: date [-u|--utc|...

JavaScript はチェックボックスの選択機能を実装します

この記事の例では、すべてのチェックボックスの選択を実現するためのJavaScriptの具体的なコード...

W3C チュートリアル (14): W3C RDF および OWL アクティビティ

RDF と OWL は、2 つの重要なセマンティック ウェブ テクノロジーです。 RDF と OWL...

W3C チュートリアル (10): W3C XQuery アクティビティ

XQuery は、XML ドキュメントからデータを抽出するための言語です。 XQuery は、XML...

InnoDB エンジンのパフォーマンスを最適化するための my.cnf パラメータ構成

私はインターネット上で数え切れないほどの my.cnf 構成を読みましたが、言及されている構成のほと...

Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法

ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...

Linux システム Docker への ASP.NET Core アプリケーションのデプロイのプロセス分析

目次1. システム環境2. 運用プロセスと途中で遭遇した問題1. システム環境1. Tencent ...

vue+el-element でファイル名に応じてダイアログを動的に作成する実践

目次背景成し遂げる1. カプセル化された /utils/dialogControl.js 2.ダイア...

Vue の foreach 配列と js の traversal 配列の書き方の説明

Vue foreach配列を記述し、jsで配列をトラバースする方法シナリオVueでAxiosを使用し...

ページデザインにおけるテーブルとdivの適切な適用についての簡単な説明

この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...

Dockerfile を使用して Java ランタイム環境のミラーを作成する方法

現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...

ハイパーリンクを開くターゲットのテスト

リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...