特殊函数

CSS定义了许多函数,其中大多数都可以很好地使用Sass的普通函数语法。它们被解析为函数调用,原生CSS函数则按原样编译为CSS。不过,也有一些例外,它们具有特殊的语法,不能仅将其解析为SassScript表达式。所有特殊函数调用都返回未引用的字符串

url()

url()是CSS中常用的函数,但是它的语法与其他函数不同:它可以接受带引号的url,也可以不带引号的URL。因为未引用URL不是有效的SassScript表达式,所以Sass需要特殊的逻辑来解析它。

如果url()的参数是一个有效的未引用URL,那么Sass将按原样解析它,不过也可以使用插值注入SassScript值。如果它不是一个有效的未引用URL - 例如,如果它包含变量函数调用,它将被解析为一个原生的CSS函数调用

calc(), element(), progid:...(), expression()

calc()element()是在CSS规范中定义的。由于calc()的数学表达式与Sass的算法冲突,而且element()的id可以被解析为颜色,所以它们需要特殊的解析。

expression()和以progid:开头的函数是使用非标准语法的遗留Internet Explorer特性。尽管最近的浏览器不再支持它们,但Sass继续解析它们以获得向后兼容性。

Sass允许这些函数调用中的任何文本,包括嵌套括号。除了插值可用于注入动态值之外,没有任何内容被解释为SassScript表达式。

min(),max()

兼容性:Dart Sass 1.11.0+ |LibSass ✗|Ruby Sass ✗

LibSass和Ruby Sass目前总是将min()max()解析为Sass函数。要为这些实现创建纯min()max()调用,您可以编写类似于unquote("min(#{$padding},env(safe-area-inset-left)")的代码。

CSS在第4级别值[1]和单位增加了对min()max()的支持,Safari很快采用了它们来支持iPhoneX。但是在此之前,Sass就支持自己的min()max()函数,而且它需要向后兼容所有现有的样式表。这就需要特别的语法技巧。

如果是有效的原生CSSmin()max()的调用,那么它将被编译成一个CSS min()max()调用。“原生CSS”包括对calc()env()var()min()max()的嵌套调用,插值也是。但是,只要调用的任何部分包含SassScript特性,比如变量函数调用,它就会被解析为对Sass Core对min()max()的调用。


  1. 原文,不理解何意 😔 ↩︎

上次更新: 2019-11-5 4:49:11 PM