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 を使用する方法
/******************** * カーネルにおけるリンクリストの応用********...
1. MySQLデータベースの構成と関連概念まず、MySQL はリレーショナル データベースである...
1. ダウンロード2. 減圧3. パス環境変数を追加し、mysqlが配置されているbinディレクトリ...
使用法: date [オプション]... [+フォーマット]または: date [-u|--utc|...
この記事の例では、すべてのチェックボックスの選択を実現するためのJavaScriptの具体的なコード...
RDF と OWL は、2 つの重要なセマンティック ウェブ テクノロジーです。 RDF と OWL...
XQuery は、XML ドキュメントからデータを抽出するための言語です。 XQuery は、XML...
私はインターネット上で数え切れないほどの my.cnf 構成を読みましたが、言及されている構成のほと...
ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...
目次1. システム環境2. 運用プロセスと途中で遭遇した問題1. システム環境1. Tencent ...
目次背景成し遂げる1. カプセル化された /utils/dialogControl.js 2.ダイア...
Vue foreach配列を記述し、jsで配列をトラバースする方法シナリオVueでAxiosを使用し...
この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...
現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...
リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...