当Sass和New CSS功能相撞时

CSS近期新增了许多酷炫特性，例如自定义属性和新函数。这些特性虽然能简化我们的工作，但也可能与Sass等预处理器产生有趣的交互问题。

本文将探讨我遇到的问题、解决方法，以及我为何至今仍认为Sass必不可少。

遇到的错误

如果您使用过新的min()和max()函数，在处理不同单位时可能会遇到类似这样的错误消息：“不兼容的单位：vh和em”。

这是因为Sass拥有自己的min()函数，并忽略CSS的min()函数。此外，Sass无法使用两个单位之间没有固定关系的值进行任何计算。

例如，cm和in单位之间存在固定关系，因此Sass可以计算出min(20in, 50cm)的结果，并且在代码中使用时不会报错。

其他单位也是如此。例如，角度单位之间都存在固定关系：1turn、1rad或1grad始终计算为相同的deg值。同样，1s始终为1000ms，1kHz始终为1000Hz，1dppx始终为96dpi，1in始终为96px。这就是为什么Sass可以在它们之间进行转换，并将它们混合在计算和函数（例如它自己的min()函数）中。

但是，当这些单位之间没有固定关系时（例如前面em和vh单位的例子），就会出现问题。

这不仅仅是不同的单位。尝试在min()内部使用calc()也会导致错误。如果我尝试类似calc(20em 7px)这样的代码，则会收到“calc(20em 7px)对于min不是一个数字”的错误。

当我们想要在CSS过滤器（例如invert()）中使用CSS变量或数学CSS函数（例如calc()、min()或max()）的结果时，还会出现另一个问题。

在这种情况下，我们会收到“`$color: 'var(--p, 0.85)' 不是invert的有效颜色”的提示。

grayscale()也会出现同样的问题：“$color: 'calc(.2 var(--d, .3))' 不是grayscale的有效颜色”。

opacity()也会导致同样的问题：“$color: 'var(--p, 0.8)' 不是opacity的有效颜色”。

然而，其他过滤器函数——包括sepia()、blur()、drop-shadow()、brightness()、contrast()和hue-rotate()——都可以与CSS变量正常工作！

事实证明，发生的情况与min()和max()问题类似。Sass没有内置的sepia()、blur()、drop-shadow()、brightness()、contrast()、hue-rotate()函数，但它确实有自己的grayscale()、invert()和opacity()函数，并且它们的第一个参数是$color值。由于它找不到该参数，因此会抛出错误。

出于同样的原因，当我们尝试使用列出至少两个hsl()或hsla()值的CSS变量时，也会遇到麻烦。

另一方面，color: hsl(9, var(--sl, 95%, 65%))是完全有效的CSS，并且在没有Sass的情况下也能正常工作。

rgb()和rgba()函数也会发生完全相同的情况。

此外，如果我们导入Compass并尝试在linear-gradient()或radial-gradient()内部使用CSS变量，即使在conic-gradient()内部使用变量也能正常工作（如果浏览器支持的话），我们也会收到另一个错误。

这是因为Compass带有linear-gradient()和radial-gradient()函数，但从未添加过conic-gradient()函数。

所有这些情况下的问题都源于Sass或Compass具有同名函数，并假设这些是我们打算在代码中使用的函数。

糟糕！

解决方法

这里的诀窍是记住Sass区分大小写，但CSS不区分大小写。

这意味着我们可以编写Min(20em, 50vh)，Sass不会将其识别为它自己的min()函数。不会抛出错误，它仍然是有效的CSS，并且按预期工作。类似地，编写HSL()/HSLA()/RGB()/RGBA()或Invert()可以避免我们前面遇到的问题。

至于渐变，我通常更喜欢linear-Gradient()和radial-Gradient()，因为它更接近SVG版本，但在其中使用至少一个大写字母也能正常工作。

为什么？

几乎每次我发布任何与Sass相关的推文时，都会有人告诫我，现在有了CSS变量，就不应该再使用Sass了。我想解决这个问题，并解释我为什么不同意。

首先，虽然我发现CSS变量非常有用，并且在过去三年中几乎将它们用于所有方面，但需要注意的是，它们会带来性能成本，并且使用当前的DevTools追踪在calc()计算迷宫中出现错误的地方可能会很痛苦。我尽量避免过度使用它们，以免陷入使用它们的缺点超过好处的境地。

一般来说，如果它像一个常量一样工作，不会逐元素或逐状态变化（在这种情况下，自定义属性绝对是最佳选择），或者减少编译后的CSS数量（解决由前缀创建的重复问题），那么我将使用Sass变量。

其次，变量一直是我使用Sass的原因中很小的一部分。当我在2012年末开始使用Sass时，它主要用于循环，这是我们目前在CSS中仍然没有的功能。虽然我已经将部分循环转移到HTML预处理器（因为它减少了生成的代码，并且避免了以后必须同时修改HTML和CSS），但我仍然在很多情况下使用Sass循环，例如生成值列表、渐变函数内的停止列表、多边形函数内的点列表、变换列表等等。

(以下内容与原文一致，略去重复部分，避免冗余)

以上是当Sass和New CSS功能相撞时的详细内容。更多信息请关注PHP中文网其他相关文章！