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 プルタイムアウトの解決策

推薦する

Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法

Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...

Vue3とVue2の利点のまとめ

目次1. なぜ vue3 が必要なのでしょうか? 2. vue3の利点3. 応答原則の違い4. ライ...

シームレスなトークンリフレッシュを実現する方法

目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...

HTMLでキーワードを強調表示するのに最適なソリューション

最近、プロジェクトに取り組んでいるときに、Web ページ上のキーワードを強調表示する機能に遭遇しまし...

JavaScriptにおけるこれの深い理解

Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...

MySQLクエリは、フィールドが数値とカンマではないことを指定します。

コアSQL文数字を含まない MySQL クエリ ステートメント: SELECT * FROM tes...

シンプルな加算計算機の JavaScript 実装

この記事では、参考までに、加算計算機を実装するためのJavaScriptの具体的なコードを紹介します...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...

Linuxシステムにmsfをインストールするプロセスの詳細な説明

または、インストールプロセスを自分で書き留めてください。私のサーバーシステムはAliyun Linu...

docker view container log コマンドの実装

なぜログを読む必要があるのでしょうか?たとえば、コンテナの起動に失敗したがプロンプトが表示されない場...

MySQL SHOW STATUSステートメントの使用

MySQL のパフォーマンス調整とサービス ステータスの監視を行うには、MySQL の現在の実行状態...

Tomcatの再構成後に起動が遅くなる問題を迅速に解決

Jenkins+Tomcatサーバーの設定中に、Tomcat設定ファイルが変更され、サーバーのTom...

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 1.2 クロージャのメモ化: 関数は定義された環境を記憶する1....