CSSには、カスタムプロパティと呼ばれる機能があります。あなたはこれを知っています。
html {
--brandColor: red;
}
.card {
border-color: var(--brandColor);
h2 {
color: var(--brandColor);
}
}また、人々は、やや同じ意味で、これらをCSS変数と呼びます。どういうわけか、それは私を気にしません。たとえば、フロントエンド開発者のようなものはありません。フロントエンドに焦点を当てるフロントエンドの開発者がいます。
しかし、ここでは、私がそれらが使用されているのを見たいと思っていないにもかかわらず、彼らが理にかなっているように感じます。同様に、カスタムプロパティは正しいと感じています。作成するとき --something、それはCSSのプロパティとして使用されていますが、私は自分で名前を作り上げました。それは…カスタム…プロパティです。そして、後でそれを使用します var() このカスタムプロパティ値は動的変数に変わっているため、明らかに「変数」を表します。したがって、ここで起こっていることを「CSS変数」と呼ぶことはまったく問題ありません。
次に進んでいるのは、問題全体についてCSS変数について話す必要があると思います。
ただ 他の週 CSSに何が価値があるかを尋ねるきれいな方法があるかどうかを見ようとしていました cos(25deg) だった。私はとても近づいたように感じ、単位のない数字を取るプロパティに値を設定し、最初に変数を入力しようとしましたが、それを得ることができませんでした。 Bramusが新鮮な大学に試してみることで証明されたように、ここには決してあきらめないことについての教訓があります それを絶対に証明することはできます。
あなたは完全にします 変数を時々入力する必要があります、99％のユースケースにより、ブラウザがタイプを知っている場合に（ほとんど）できるアニメーション化できます。あなたもそれを考慮することができます 「タイプ安全」の形式 だから、ハードコアタイプスクリプトオタクはおそらくそれを好むでしょう。
上記は、あなたが得ることができるように状況のニッチです。
CSS変数は実際に役立ちますか？
私はそれを考えるのが好きです 最も一般的なユースケース 物事のために。グリッドの最も一般的なユースケースは、2つのものを並べて置くことです。 aの最も一般的なユースケース 重要な確認/キャンセルの質問です。 aの最も一般的なユースケース popover 脚注です。 SVGの最も一般的なユースケースはロゴです。 CSS変数の場合、それはブランドの色です。
かなり単純なウェブサイトでさえ、私はあなたが何度も設定する必要がある特に重要な色が1つあるに違いないと思います。変数を使用すると、物事を乾燥させ続けるだけで、簡単に微調整できます。それはまさに私がこの投稿を始めたコードです。しかし、変数はますます強力です。ちょうどそれ --brandColor 変更せずに微調整可能です…
footer {
background: color-mix(in oklch, var(--brandColor), black 20%);
}今、そのブランドの色を微調整すると、微調整（男）を微調整します。
私にとってはワイルドでさえ、1つのカスタムプロパティを設定することです（用語をやり取りするのがどれだけ楽になりますか？）は、あちこちで効果をもたらす可能性があります。これは、コンテナスタイルのクエリのおかげです。
このようなコードを検討してください：
@container style(--darkBackground) {
> * { color: white; }
}今if --darkBackground すべての要素で（任意の価値に）設定されていますが、すべての直接の子供は白いテキストを持っています。これをサポートしています かなり限られています、ですから、これがCSSの書き方にどのように影響するかを私たちの誰もが強く理解するまで、しばらく時間がかかります。私にとって、これはに似ています :has() どのように変化 どこでも ページでは、他の場所での変更に影響を与える可能性があります（私は主張します）予想外の方法です。強力な方法。多分便利な方法。しかし、予想外の方法。 CSSはかつてかなり途方もないトップダウンの言語であり、それは変化しています。
そのような限られたサポートを備えた機能はどうですか？それらの1つはです if() 声明 （WOAH）、CSS変数のテストにのみ役立ちます。私はファンですが、ここですべてを理解しません。別のLea Verou投稿です 提案：CSS変数グループ。確認してください：
:root {
--color-green: {
100: oklch(95% 13% 135);
200: oklch(95% 15% 135);
/* ... */
900: oklch(25% 20% 135);
};
}これは、ように使用される変数に変わります var(--color-green-200)。変数のセットを宣言するこのような寒い方法なし たくさんの繰り返し。 著者のためだけですが、それは大丈夫だと思います。 CSS変数私は主にプロセス後の時代（HEH）に存在するように感じます。したがって、おそらくループなどでこれを抽象化するものであっても、もうそれはありません。
Be the first to comment
