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

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 つのパラメータを取ります。これらを使用して、カスタム プロパティが失敗した場合にフォールバック値を提供できます。

幅: var(--custom-width, 20%);

カスタム プロパティはネストできます。

  • –ベースカラー: #f93ce9;
  • –background-gradient: linear-gradient(上へ、var(–base-color)、#444);

変数は、CSS に新たに追加された calc() 関数と組み合わせて使用​​できます。

  • –コンテナの幅: 1000px;
  • 最大幅: calc(var(–container-width) / 2);

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  ウェブサイトにファビコンを追加するためのヒント: URLの前の小さなアイコン

>>:  Docker プルタイムアウトの解決策

推薦する

SSMプロジェクトは、ホットデプロイメント構成を実装するためにTomcatとMavenを使用してWARパッケージとしてデプロイされることが多い。

背景ご存知のとおり、JavaEE プロジェクトを開発した後は、そのプロジェクトをサーバーの Tomc...

CSS3 の新しいレイアウト: flex の詳細な説明

Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...

vue.js ルーターのネストされたルート

序文:ルートでは、主要部分は同じでも、基礎となる構造が異なることがあります。たとえば、ホームページに...

MySql カンマ連結文字列クエリの 2 つの方法

次の2つの関数は、 FIND_IN_SETと同じように使用されます。使用する場合、 FIND_IN_...

MySQLデータベース入門:データベースバックアップ操作の詳細な説明

目次1. 単一データベースのバックアップ2. 圧縮バックアップ3. マルチデータベースバックアップ4...

Baotaパネルを再起動すると、「-ModuleNotFoundError: No module named 'geventwebsocket'」というメッセージが表示されます。

背景:サーバーがFlaskプロジェクトをデプロイし、python3をインストールしたため、再起動時に...

js で下線とキャメルケースの変換を実装する (複数の方法)

目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...

Ubuntu システムログで /var/log/messages を設定する方法

1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...

「いいね!」文がインデックスに登録されないのはなぜですか?

序文この記事は、最も人気のある言語で最も退屈な基礎知識を説明することを目的としていますこのトピックは...

問題におけるJS演算子の調査

問題は、誰もが「メモリ リーク」について知っていることです。一般的なシナリオはいくつかあります。クロ...

MySQLにインデックスを追加する方法

インデックスの簡単な紹介は次のとおりです。インデックスを追加する目的は、データベース クエリのパフォ...

CentOS 6-7 PHPのyumインストール方法(推奨)

1. 現在インストールされているPHPパッケージを確認するyum list installed |...

SQL Server 2019 Always On クラスターの Docker デプロイメントの実装

目次Docker デプロイメント Always on クラスターDockerをインストールする建築関...

nacos が mysql に接続できない場合の解決策

理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...

Navicat による MySQL パーティショニングの実践

MySQLのパーティショニングは、非常に大きなテーブルを管理するのに役立ちます。MySQLのパーティ...