SASSと新しいCSS機能が衝突するとき

CSSは最近、カスタムプロパティや新しい機能など、多くのクールな機能を追加しました。これらの機能は私たちの作業を簡素化することができますが、SASSなどの前執行機関と興味深い相互作用の問題を作成することもできます。

この記事では、私が遭遇した問題、解決策、そしてSASSがまだ不可欠だと思う理由について説明します。

遭遇したエラー

新しいmin()とmax()関数を使用した場合、異なるユニットを処理するときにこのようなエラーメッセージに遭遇する可能性があります：「互換性のないユニット：VHとEM」。

これは、SASSに独自のmin()関数があり、CSSのmin()関数を無視しているためです。さらに、SASSは、2つのユニット間に固定関係のない値を使用して計算を実行できません。

たとえば、CMとINユニットの間には固定関係があるため、SASSはmin(20in, 50cm)の結果を計算でき、コードで使用したときにエラーを報告しません。

他のユニットにも同じことが言えます。たとえば、角度単位の間には固定関係があります：1turn、1rad、または1グラデーションは、常に同じdeg値として計算されます。同様に、1は常に1000ms、1kHzは常に1000Hz、1DPPXは常に96dpi、1INは常に96pxです。そのため、SASSはそれらの間を変換し、計算と関数（独自のmin()関数など）でそれらを混ぜることができます。

ただし、これらのユニット（EMおよびVHユニットの以前の例など）の間に固定関係がない場合、問題が発生します。

単なるユニットではありません。 min() calc() （）を使用しようとすると、エラーが発生します。 calc(20em 7px)のようなコードを試してみると、「 calc(20em 7px)がminの数ではない」というエラーが発生します。

CSSフィルター（例： invert() ）のcalc() 、 min() 、またはmax()などのCSS変数または数学的CSS関数の結果を使用すると、別の問題が発生します。

この場合、「 `$ color： 'var（ - p、0.85）」は、反転の有効な色ではない」というプロンプトを受け取ります。

同じ問題は、 grayscale()発生します$color: 'calc(.2 var(--d, .3))'

opacity()も同じ問題を引き起こします：「 $color: 'var(--p, 0.8)'は不透明度の有効な色ではありません」。

ただし、 sepia() 、 blur() 、 drop-shadow() 、 brightness() 、 contrast() 、およびhue-rotate()を含む他のフィルター関数は、すべてCSS変数で適切に動作します。

結局のところ、起こったことはmin()およびmax()問題に似ています。 SASSには、組み込みのsepia() 、 blur() 、 drop-shadow() 、 brightness() 、 contrast() 、 hue-rotate()関数はありませんが、独自のgrayscale() 、 invert() 、およびopacity()関数を備えており、最初の引数は$color値です。パラメーターが見つからないため、エラーがスローされます。

同じ理由で、少なくとも2つのhsl()またはhsla()値をリストするCSS変数を使用しようとする場合にも問題があります。

一方、 color: hsl(9, var(--sl, 95%, 65%))は完全に有効なCSSであり、SASSなしで正常に動作します。

rgb()およびrgba()関数にまったく同じことが起こります。

また、コンパスをインポートし、 linear-gradient()またはradial-gradient()内でCSS変数を使用しようとすると、 conic-gradient()内で変数を使用しても（ブラウザがサポートしている場合）、別のエラーも取得します。

これは、コンパスにはlinear-gradient()およびradial-gradient()関数が付属しているためですが、 conic-gradient()関数は決して追加されていません。

これらすべての場合の問題は、同じ名前の関数を持つSASSまたはコンパスに起因し、これらがコードで使用する機能であると仮定します。

おっと！

解決

ここでのトリックは、 SASSがケースに敏感であることを覚えておくことですが、CSSはケースに敏感ではありません。

これは、SASSが独自のmin()関数として認識されないMin(20em, 50vh)を書くことができることを意味します。エラーはスローされませんが、まだ有効なCSSであり、予想どおりに機能します。同様に、 HSL() / HSLA() / RGB() / RGBA()またはInvert()を書くことは、以前の問題を回避できます。

勾配に関しては、svgバージョンに近いため、 linear-Gradient()およびradial-Gradient()を好みますが、少なくとも1つの大文字で正常に動作します。

なぜ？

SASS関連のツイートを投稿するたびに、CSS変数を使用すると、SASSを使用しないでください。この問題を解決し、なぜ私が同意しないのかを説明したいと思います。

第一に、CSS変数は非常に有用であり、過去3年間でほぼすべての側面で使用されていることがわかりましたが、パフォーマンスコストが搭載されており、現在のdevtoolsを使用してcalc()計算迷路のエラーが表示される場所を追跡することが痛いことに注意することが重要です。私は、それらを使用することの欠点が利益を上回る状況で立ち往生しないように、それらを過度に使用しないようにします。

一般的に言えば、それが定数のように機能する場合、要素ごとまたは州ごと（この場合はカスタム属性が間違いなく最良のオプションです）を変更しない場合、またはコンパイルされたCSSの数（プレフィックスによって作成された重複する問題を解決）を減らします。

第二に、変数は常にSASSを使用する理由のほんの一部でした。 2012年後半にSASSを使用し始めたとき、それは主にループに使用されていました。これは、現在CSSにはまだない機能です。ループの一部をHTMLプリプロセッサに移動しましたが（生成されたコードを削減し、後でHTMLとCSSの両方を変更する必要がないため）、値のリストを生成するなど、多くの場合、SASSループを使用して、グラデーション機能内のリスト、ポリゴン作業内のポイントリスト、リストを変換します。

（次のコンテンツは元のテキストと一致しており、重複した部品を省略して冗長性を回避します）

以上がSASSと新しいCSS機能が衝突するときの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。