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 ほど簡潔ではありません。 特別な注意単一ファイルコンポーネント (.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 のロックは、グローバル ロック、テーブル ロック、行ロックに大...
Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...
シーンについて話すメールを送信サードパーティのウェブサイトにHTMLを埋め込む他の編集者の記事をコピ...
導入GitLab CE または Community Edition は、主に Git リポジトリのホ...
構造本文、見出し、HTML、タイトル文章abbr、頭字語、アドレス、引用ブロック、br、引用、コード...
インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...
序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...
効果画像のない表示は単なる空虚な言葉です。 1. オーディオをベースにし、elementUI と組み...
目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...
1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...
目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...
目次序文グローバルロックテーブルロックテーブルロックメタデータ ロック (MDL ロック)要約する参...
MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...
目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...
<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...