CSS変数var()の使い方は何ですか? CSS変数var()の使い方を詳しく解説

Web プロジェクトが大きくなると、その CSS は天文学的に大きくなり、乱雑になる可能性があります。この問題を解決するために、新しい CSS 変数が間もなく主要ブラウザに表示され、開発者が繰り返し発生する CSS プロパティを再利用して簡単に編集できるようになります。 SASS または Less を使用したことがある人なら誰でも、その変数機能がいかに優れているかを知っているはずですが、これらの変数はプリプロセッサーであるため、使用前にコンパイルする必要があります。バニラ CSS で変数が使用できるようになったので、ブラウザですぐに使用できるようになりました。 [推奨読書: CSS チュートリアル ]

CSS 変数の定義と使用

他の CSS 定義と同様、変数は同じスコープと継承ルールに従います。これらを使用する最も簡単な方法は、宣言を :root 擬似クラスに追加してグローバルに使用できるようにし、他のすべてのセレクターがそれを継承できるようにすることです。

html：

:root {
  --awesome-blue：＃2196F3;
}

変数の値にアクセスするには、var(…) 構文を使用できます。名前では大文字と小文字が区別されるため、-foo != –FOO となることに注意してください。

.element {
background-color:var(--awesome-blue);
}

ブラウザのサポート

IE を除く一般的に使用されるブラウザは完全にサポートされています。詳細については、こちらをご覧ください – [CSS 変数を使用できます](https://caniuse .com/#search=)。 var())。以下に、CSS 変数の一般的な使用例をいくつか示します。正しく動作していることを確認するには、上記のブラウザのいずれかで表示してみてください。

例 1 – テーマの色

CSS の変数は、テーマ内の色の繰り返しなど、複数の要素に同じルールを何度も適用する必要がある場合に最も役立ちます。同じ色を再利用するたびにコピーして貼り付けるのではなく、変数に入れてそこからアクセスします。

ここで、私たちが選択した青の色合いがクライアントに気に入らない場合は、1 か所 (変数の定義) でスタイルを変更して、テーマ全体の色を変更できます。変数がないと、すべての出現箇所を手動で検索して置換する必要があります。

コードをコピーしてエディターでテストできます

* {margin: 0;padding: 0;box-sizing: border-box;}html {padding: 30px;font: normal 13px/1.5 sans-serif;color: #546567;background-color: var(--primary-color);}.container {background: #fff;padding: 20px;}h3 {padding-bottom: 10px;margin-bottom: 15px;}p {background-color: #fff;margin: 15px 0;}button {font-size: 13px;padding: 8px 12px;background-color: #fff;border-radius: 3px;box-shadow: none;text-transform: uppercase;font-weight: bold;cursor: pointer;opacity: 0.8;outline: 0;}button:hover {opacity: 1;}
<!-- 分割线 -->:root {
--primary-color: #B1D7DC;
--accent-color: #FF3F90;
}
html {
background-color: var(--primary-color);
}
h3 {
border-bottom: 2px solid var(--primary-color);
}
button {
color: var(--accent-color);
border: 1px solid var(--accent-color);
}

<div class="container">
<h3>对话框窗口</h3>
<p>过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。</p>
<button>确认</button>
</div>

例 2 - 属性クラス名の可読性

変数のもう 1 つの重要な用途は、次のような場合です。より複雑なプロパティ値を保存する場合は、それを覚えておく必要はありません。最良の例は、CSS ルールの box-shadow、transform、font などの複数のパラメーターを持つことです。

プロパティを変数に配置すると、意味的に読みやすい名前を使用してプロパティにアクセスできます。

html{background-color: #F9F9F9;}
ul{padding: 20px;list-style: none;width: 300px;}
li{font: normal 18px sans-serif;padding: 20px;transition: 0.4s;margin: 10px;color: #444;background-color: #fff;cursor: pointer;}
<!-- 分割线 -->
:root{
--tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
--animate-right: translateX(20px);
}
li{
box-shadow: var(--tiny-shadow);
}
li:hover{
transform: var(--animate-right);
}

<ul>
<li>我在这里!</li>
<li>我在这里!</li>
<li>我在这里!</li>
</ul>

例 3 – 変数を動的に変更する

標準ルールは、カスタム プロパティが複数回宣言され、スタイルシートで定義された最後のものが上で定義されたものをオーバーライドする場合の競合を解決するのに役立ちます。

次の例は、コードを明確かつ簡潔に保ちながら、ユーザーがプロパティを動的に変更することがいかに簡単であるかを示しています。

.container{background: #fff;padding: 20px;}
p{transition: 0.4s;}
.title{font-weight: bold;}
<!-- 分割线 -->
.blue-container{
--title-text: 18px;
--main-text: 14px;
}
.blue-container:hover{
--title-text: 24px;
--main-text: 16px;
}
.green-container:hover{
--title-text: 30px;
--main-text: 18px;
}
.title{
font-size: var(--title-text);
}
.content{
font-size: var(--main-text);
}

<div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">这是个标题</p>
<p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
</div>
</div>
</div>

[示例地址](https://codepen.io/w3cbest/pen/OrxLLE)
正如您所看到的，CSS变量非常简单易用，开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容：
var()函数有两个参数，如果自定义属性失败，它可用于提供回退值：

width``: var(–custom-width, 20%``);

カスタム属性はネストできます:

*   –base-color: #f93ce9;
*   –background-gradient: linear-gradient(to top, var(–base-color), #444);

変数は、CSS の別の新機能である calc() 関数と組み合わせて使用​​できます。

rreeee

以上がCSS変数var()の使い方は何ですか? CSS変数var()の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。