Sass函数:unit()函数

Posted keep

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass函数:unit()函数相关的知识,希望对你有一定的参考价值。

unit() 函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算:

>> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"

但加、减碰到不同单位时,unit() 函数将会报错,除 px 与 cm、mm 运算之外:

>> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"
>> unit(10px * 2em - 3cm / 1rem)
SyntaxError: Incompatible units: ‘cm‘ and ‘px*em‘.
>> unit(10px * 2em - 1px / 1rem)
SyntaxError: Incompatible units: ‘‘ and ‘em‘.
>> unit(1px - 1em)
SyntaxError: Incompatible units: ‘em‘ and ‘px‘.
>> unit(1px - 1rem)
SyntaxError: Incompatible units: ‘rem‘ and ‘px‘.
>> unit(1px - 1%)
SyntaxError: Incompatible units: ‘%‘ and ‘px‘.
>> unit(1cm + 1em)
SyntaxError: Incompatible units: ‘em‘ and ‘cm‘.

unit() 函数对于单位运算相对来说也没有规律,而且有些单位也无法整合成一个单位,对于我们在 CSS 中运用中并不适合,比如:

>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"

换句话说,上面运算出来的单位,对于在 CSS 中使用将是没有任何意义的。

以上是关于Sass函数:unit()函数的主要内容,如果未能解决你的问题,请参考以下文章

Sass Introspection函数

Sass函数:数字函数-percentage()

如何在预编译期间包含自定义 SASS 函数?

VSCode自定义代码片段——声明函数

VSCode自定义代码片段8——声明函数

SASS - 函数