どのようにCSSの変数を使用して私はJavaScript

注:私のポストはthis article CSSのパワーについてcalc() . 間違いなく読む価値がある!
あなたが2018年以降ウェブ開発についていているならば、あなたは多分向こうに来ましたCSS custom properties / variables . 彼らは、新しいCSSのようなJSソリューションでさえスコーピングとカスケーディングを提供するように、生のCSSを使用するだけではなく、アプリケーションの新しい湯たんぽになりましたStyled Components 直接複製しないでください.
私はCSSのカスタムのプロパティを私は最初に私はこのようなプロップスライシングになって以来、私は彼らについて知っていたときにCSSのカスタムプロパティを与えていない😛), しかし、最近のプロジェクトでは、エキゾチックなフレームワークを使用して伝統的なスタイルシートに戻る必要がありました.SvelteJS .
まず、必要に応じてスタイルを宣言するだけで、変数の形がなくても扱いやすくなりました.何かカスタムがコードに基づいて起こる必要があるときはいつでも、私はインラインのCSSの文字列をかき鳴らすことができて、最適化についてあまり心配しないで、私の要素にそれをタックしました.しかし、ウェブサイトはまだ驚くほどのように見えたが、私のコードベースは、より読みにくくなっていた.CSS変数!
SnoNote :人々が屋根から叫ぶ時がありました.「彼らは変数と呼ばれていません;彼らはカスタムメイドのプロパティです!」ありがたいことに、関連するMDNドキュメントと一般的なLINOはそれらの変数を呼び出すだけである.だからどちらかの作品が、“変数”は少し明確に私の意見で😊

それでは、どのようにCSS変数が動作しますか？

よく知らない人には、選択した要素内の変数を宣言したり、:root セレクタをグローバルにアクセスできるようにします.ジャスト・ユース--[property-name] CSSが変数としてそれを拾うように構文.

:root {
    --global-var: 50px;
}
.some-class {
    --scoped-var: 4%;
}

それから、それらの変数をサブ要素(またはグローバルプロパティのためのどんな要素)で使用しますvar(--[property-name]) .

.child-of .some-class {
    margin: var(--scoped-var);
}

これはどのように似ていますCSS attributes CSS変数を選択すると、CSSプロパティを定義するために使用されます.これは、プリプロセッサの変数が現在何年も提供してきた柔軟性と同じ種類のものを得ることを意味します.しかし、明らかにclunkier構文で🤷‍♀).
よく知られていないことは、CSS変数がどのようにunitlessでありえますか.これは最初は大きな取引には見えませんが、大きな利点がありますcalc() , CSS変数は、設定量でプロパティをスケールするために使用することができます.これは自分のコードをリファクタリングする際に非常に貴重でした.なぜなら、CSSの計算を2行のCSSで計算することができたからです.

例を見ましょう

アクションでカスタムプロパティを表示するには、私が構築したポートフォリオの概念からロジックスニペットを取る.
ゴールは単純でした:私はアクセントバーを1つの勾配から次へ変化して、ループ上で勾配のセットを循環させたいです.これは1つのアニメーションキーフレームで可能です.しかし、私は警告しました:ループ間隔は論理CSSが複製できなかったページの他の要素で使われていました、そして、私は一貫性のために私のアクセントバーで同じ間隔を使いたかったです.この間隔は、もちろん、JavaScriptsetInterval(...) . コールバック関数がヒットされるたびに、いくつかのCSSが変更される必要がありました.この間隔は、親コンポーネントで設定され、私のアクセントバーコンポーネント内でアクセスされました.
例に飛び込む前に、このプロジェクトはSvelteで構築されたことに注意してください.これはあまりにもコードの読みやすさには影響しないちょっと詳細が若干の魔法を含むと認めてください✨

最終目標

私の古いやり方

もともと、私はグラデーションを通して隠れたオーバーフローで広い背景画像を作成することによって循環しました.これは背景が変化するという幻想を与えました、しかし、それは1つの大きな勾配を通して本質的に動いていました.しかし、この背景位置は、かなりの量の計算を必要とした.
いくつかのコンポーネント間で簡単にすべての間隔追跡を維持するために、私はgradientIndex 変数は小文字として渡されます.このインデックスは、私が呼ばれるGRADIENTS .
しかし、これはCSSを更新するためにいくつかの余分なロジックが必要ですgradientIndex が変更された場合、インラインスタイルとして適用するために新しいCSS文字列を構築する必要があります.このように、私たちは、LifeCycle方法を掘る必要がありますgradientIndex プロップの変更.Svelteでは、これはafterUpdate コールバック関数

...
afterUpdate(() => {
  backgroundPosition = `${(100 / (GRADIENTS.length - 1)) * gradientIndex}%`;
});

また、私たちのオーバーフローのための背景サイズをGRADIENTS.length :

const backgroundSize = `${GRADIENTS.length * 200}% 100%`;

最後に、私たちは私たちの構築された線形勾配背景と並んでインラインスタイルにこれを投げます.

<span
  class="bar"
  style="background-image: {backgroundImage};
  background-position: {backgroundPosition};
  background-size: {backgroundSize}"
></span>

それで、はい、終わり結果はどんなパフォーマンス問題なしでもかなりよく機能します..私の過電圧MacBook anyway😛 しかし、我々はスケールだけで悪化する複雑さの公正な量を追加しました.我々はインラインCSS構築を処理するためにライフサイクルメソッドを加えました、そして、我々は理想的に彼らが属するスタイルの範囲内で保たれる変数で、我々のJavaScriptをゆがめています.だけCSSを使用してこれを計算する方法があった場合!

新しい，より読みやすい解決法

それで、どうすればCSS変数を使ってこの問題に取り組むことができますか?さて、JSで構築されたバックグラウンド位置の文字列を見て、我々は計算がどのように多くのグラデーションがあるかを知る必要があるのを見ますGRADIENTS.length ) と現在の位置を示すインデックス.gradientIndex ). では、なぜこれらのCSS変数のそれぞれを作るのか?
ありがたいことに、CSS変数は他のCSSプロパティのようなインラインスタイルを使用して設定できます(sass!したがって、両方の前述の変数がコンポーネント状態の一部であるとしましょう.CSSに以下のインラインスタイルを使用して表示できます.

<span
  class="bar"
  style="background-image: {backgroundImage};
  --index: {gradientIndex};
  --length: {gradientLength}"
></span>

今、我々は使用してCSS内の背景サイズと位置を決定することができますcalc() :

.bar {
  --index: 0;
  --length: 0;
  background-size: calc(var(--length) * 200%) 100%;
  background-position: calc((100 / (var(--length) - 1)) * var(
  --index) * 1%);
}

ここでアンパックをするカップルがあります.まず、各変数をいくつかの初期値に設定します.CSS変数を初期化するのは良い習慣ですが、インラインスタイルは常に適用される必要がありません.次に、私たちのバックグラウンドの位置を設定します--index パーセント後に直接パーセント符号を書くよりもパーセンテージで.これはcalc() 数学で定数のように変数を扱いますので、適用される単位の単位でいくつかの値で乗算しなければなりません.
ああ、新しいJSスニペットです.
...待って、もう1つはない!🎉

我々はさらに深く行くことができますか？

この例では変数カスケーディングを利用しません.これはコンポーネントベースの開発に非常に便利です.なぜなら、多くのWacky CSS演算を親コンポーネントに統合することができます.次に、子コンポーネントはCSS変数に対してカスケードからアクセスできます.我々の例では、我々はgradientIndex 私たちのカラーバーの周りのラッピングと完全に小道具としてそれを渡すことを避ける親のCSS変数!
もちろん、変数によって開発者がそれを実現せずにいくつかのレベルがカスケードダウンして、読みやすさに負の影響を与え始めることができます.これはカスケード思考とコンポーネントベースの思考の間の年齢の衝突を公開するので、控えめにこの手法を使用してください.

ラッピング

これにより、カスタムプロパティがスタイルシートにJavaScriptロジックを適用するのにかなり強力であることがわかります.その上、現在CSS変数はほとんどすべての現代のブラウザーと互換性を持ちます😢), 彼らは生産コードでさえ実験するのにかなり安全であるべきです.だから行くとスタイリングになる!

少し何かを学ぶ？

グレート.あなたがそれを逃した場合はmy "web wizardry" newsletter このような知識ナゲットを探索する!
このことは"first principles" Web開発言い換えれば、すべてのJankyブラウザAPI、曲げられたCSS規則、およびすべてのWebプロジェクトをティックにするセミアクセス可能なHTMLは何ですか?あなたがフレームワークを越えて行くことを探しているならば、これはあなたのためです🔮
Subscribe away right here . 私はいつも教えて、決してスパム❤️