CSS変数var()の使い方を理解する必要があります

Web プロジェクトがどんどん大きくなると、CSS は天文学的な大きさと複雑さを増します。この問題を解決するために、新しい CSS 変数が主要なブラウザですぐに利用できるようになります。これにより、開発者は繰り返し使用される CSS プロパティを再利用して簡単に編集できるようになります。 SASS や Less を使用したことがある人なら、その変数機能がいかに優れているか知っているはずですが、これらの変数はプリプロセッサであり、使用する前にコンパイルする必要があります。変数がバニラ CSS で利用できるようになったので、ブラウザですぐに使用できるようになりました。

CSS変数の定義と使用

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

：根 {
  --awesome-blue:#2196F3;
}

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

。要素 {
背景色:var(--awesome-blue);
}

ブラウザのサポート

IE を除くすべての一般的なブラウザで完全にサポートされています。詳細については、ここを参照してください。CSS 変数を使用できます。以下に、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: point;opacity: 0.8;outline: 0;}button:hover {opacity: 1;}
<!-- 区切り線-->:root {
--プライマリカラー: #B1D7DC;
--アクセントカラー: #FF3F90;
}
html{
背景色: var(--primary-color);
}
h3 {
下境界線: 2px 実線 var(--primary-color);
}
ボタン {
色: var(--accent-color);
境界線: 1px 実線 var(--accent-color);
}

<div class="コンテナ">
<h3>ダイアログウィンドウ</h3>
<p>ボヘミアンな生活を送るのは簡単ですが、良い友達を作るのは難しいです。 </p>
<button>確認</button>
</div>

住所例

例 2 - 属性クラス名の読みやすさ

変数のもう 1 つの重要な用途は、より複雑なプロパティ値を保存して、それを記憶する必要がないようにする場合です。その最良の例は、box-shadow、transform、font などの複数のパラメータを持つ CSS ルールです。

プロパティを変数に配置すると、意味的に読み取り可能な名前を使用してプロパティにアクセスできるようになります。

html{背景色: #F9F9F9;}
ul{パディング: 20px;リストスタイル: なし;幅: 300px;}
li{フォント: 通常の 18px サンセリフ;パディング: 20px;トランジション: 0.4 秒;マージン: 10px;色: #444;背景色: #fff;カーソル: ポインター;}
<!-- 区切り線-->
：根{
--tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
--animate-right: translateX(20px);
}
li{
ボックスシャドウ: var(--tiny-shadow);
}
li:ホバー{
変換: var(--animate-right);
}

<ul>
<li>ここにいますよ！</li>
<li>ここにいますよ！</li>
<li>ここにいますよ！</li>
</ul>

住所例

例3 – 動的に変化する変数

カスタムプロパティが複数回宣言されている場合、標準ルールによって競合を解決できます。スタイルシート内の最後の宣言が、その上にある宣言をオーバーライドします。

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

*{マージン: 0;パディング: 0;ボックスサイズ: ボーダーボックス;}
html{背景: #eee;パディング: 30px;フォント: 500 14px サンセリフ;色: #333;行の高さ: 1.5;}
.blue-container{背景: #64B5F6;左パディング: 50px;}
.green-container{背景: #AED581;パディング左: 50px;}
.container{背景: #fff;パディング: 20px;}
p{遷移: 0.4秒;}
.title{フォントの太さ: 太字;}
<!-- 区切り線-->
.blue-コンテナ{
--タイトルテキスト: 18px;
--メインテキスト: 14px;
}
.blue-container:hover{
--タイトルテキスト: 24px;
--メインテキスト: 16px;
}
.green-container:hover{
--タイトルテキスト: 30px;
--メインテキスト: 18px;
}
。タイトル{
フォントサイズ: var(--title-text);
}
。コンテンツ{
フォントサイズ: var(--main-text);
}

<div class="blue-container">
<div class="green-container">
<div class="コンテナ">
<p class="title">これはタイトルです</p>
<p class="content">さまざまな色の領域の上にマウスを置くと、このテキストとタイトルのサイズが変更されます。 </p>
</div>
</div>
</div>

住所例

ご覧のとおり、CSS 変数は非常にシンプルで使いやすく、開発者はどこにでも適用するのに多くの時間を費やす必要はありません。拡張機能は次のとおりです。

var() 関数は 2 つのパラメータを取ります。これらを使用して、カスタムプロパティが失敗した場合にフォールバック値を提供できます。