CSS 変数に慣れるために、5 つの例を段階的に見てみましょう。

CSS 変数についてご存知ですか?慣れていなくても、心配しないでください。次の記事では、CSS 変数について紹介し、CSS 変数に慣れるために 5 つの例を使用します。

Web アプリケーションが大きくなるにつれて、CSS はさらに大きくなり、冗長になり、乱雑になります。適切なコンテキストで CSS 変数を使用すると、繰り返し発生する CSS プロパティを再利用して簡単に変更するメカニズムが提供されます。

純粋な CSS が変数をサポートする前は、Less や Sass などのプリプロセッサがありました。ただし、使用前にコンパイルする必要があるため、(場合によっては) 余分な複雑さが追加されます。

CSS 変数 (カスタム プロパティとも呼ばれる) を定義して使用する方法

単純な JS 変数を宣言するのは、次のように非常に簡単です。

let myColor = "green";

For を宣言するにはCSS 変数の場合、変数名の前に 2 つのダッシュを追加する必要があります。

body {
    --english-green-color: #1B4D3E;
}

CSS 変数の値を使用するには、var(...) 関数を使用します。

.my-green-component{
    background-color: var(--english-green-color);
}

CSS 変数を管理する最も簡単な方法は、:root 疑似クラスで変数を宣言することです。 CSS 変数は他の CSS 定義と同じルールに従うため、それらを :root に配置すると、すべてのセレクターがこれらの変数にアクセスできるようになります。

:root{
    --english-green-color: #1B4D3E;
}

ブラウザによる CSS 変数のサポート

ブラウザによる CSS 変数のサポートは、まったく悪くありません。 「CSS 変数を使用できますか」を見ると、すべての主要なブラウザが CSS 変数をサポートしていることがわかります。モバイルでもPCでも。

次に、これらの CSS 変数が実際に何を行うかを見てみましょう。

例 1 - 色の管理

CSS 変数を使用するための最良のオプションの 1 つは、デザインの色です。同じ色を何度もコピーして貼り付ける代わりに、それらを変数に入れるだけで済みます。

特定の緑の色合いを更新したり、すべてのボタンを青ではなく赤にしたい製品がある場合は、その CSS 変数の値を変更するだけで済みます。その色が出現するすべてを検索して置換する必要はありません。

自分で試してみましょう: https://codesandbox.io/s/8kkyl4mlm9?from-embed

例 2 - 削除重複コード

多くの場合、一部のコンポーネントのさまざまなバリエーションを構築する必要があります。基本的なスタイルは同じですが、機能が少し異なります。異なる色のボタンを使用した例を使用してみましょう。

.btn {
  border: 2px solid black;
  // more props here
}

.btn:hover {
  background: black;
  // more props here
}

.btn.red {
  border-color: red
}
.btn.red:hover {
  background: red
}

次のように使用します:

Hello
Hello

ただし、コードの重複がいくつか追加されます。 .red クラスでは、境界線の色と背景の両方を赤に設定する必要があります。ある日、色を変更する必要があると、いちいち変更する必要があり非常に面倒です。この問題は CSS 変数を使用すると簡単に解決できます。

.btn {
    border: 2px solid var(--color, black);
}
.btn:hover {
    background: var(--color, black);
}
.btn.red {
    --color: red
}

自分で試してみてください: https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

例 3 - 特定のプロパティを読みやすくする

CSS 変数は、より複雑なプロパティ値のショートカットを作成して、覚えておく必要がないようにしたい場合に便利です。

、transform、font などの CSS プロパティや、複数のパラメーターを含むその他の CSS ルールが良い例です。

プロパティを変数に入れると、より読みやすい形式で再利用できます。

// 主要代码
:root {
  --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}
li {
  box-shadow: var(--tiny-shadow);
}
li:hover {
  transform: var(--animate-right);
}

試してみましょう: https://codesandbox.io/s/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187

// 主要代码
.orange-container {
  --main-text: 18px;
}
.orange-container:hover {
  --main-text: 22px;
}
.red-container:hover {
  --main-text: 26px;
}
.title {
  font-size: var(--title-text);
}
.content {
  font-size: var(--main-text);
}

.container:hover {
  --main-text: 18px;
}

自分で試してみてください: https://codesandbox.io/s/xj0qxn2l7w?from-embed=&file=/index.html

自分で試してみましょう: https://codesandbox.io/s/24j4m8y5kn?from-embed=&file=/scripts.js

扩展

就像CSS中几乎所有东西一样，变量也非常简单易用。 以下是一些未包含在示例中的技巧，但在某些情况下仍然非常有用：

注意大写，CSS变量区分大小写

:root {
 --color: blue;
 --COLOR: red;
}
/*--color and --COLOR are two different variables*/

当我们使用var()函数时，还可以传入第二个参数。 如果找不到自定义属性，则将使用此值：

width: var(--custom-width, 33%);

可以将CSS变量直接用于HTML

body {
  max-width: var(--size)
}

可以在其他CSS变量中使用CSS变量：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

可以通过媒体查询将CSS变量作为条件。 例如，以下代码根据屏幕大小更改 padding 的值：

:root {
    --padding: 15px 
}

@media screen and (min-width: 750px) {
    --padding: 30px
}

在calc()函数中也可以使用CSS变量。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

CSS 变量不是灵丹妙药。 它们不会解决我们在CSS领域中遇到的所有问题。 但是，它可以让我们的代码更具可读性和可维护性。

而且，它们极大地提高了跨大型文档进行更改的便利性。 只需将所有常量设置在一个单独的文件中，当我们只想对变量进行更改时，就不必跳过数千行代码。

原文地址：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/

作者：Daniel

更多编程相关知识，请访问：编程视频！！

以上がCSS 変数に慣れるために、5 つの例を段階的に見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。