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

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

遭遇したエラー

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

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

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

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

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

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

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

この場合、「 `$ 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()を含む他のフィルター関數(shù)は、すべてCSS変數(shù)で適切に動作します。

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

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

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

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

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

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

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

おっと！

解決

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

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

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

なぜ？

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

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

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

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

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

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