Introspection 函数

Posted 2020-08-04 悬崖上的公主

Introspection函数

Introspection 函数包括了几个判断型函数：

• type-of($value)：返回一个值的类型
• unit($number)：返回一个值的单位
• unitless($number)：判断一个值是否带有单位
• comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并

这几个函数主要用来对值做一个判断的作用，我们来依次看每个函数的功能。 

 

Introspection 函数 -type-of()

type-of() 函数主要用来判断一个值是属于什么类型：

返回值：

• number 为数值型。
• string 为字符串型。
• bool 为布尔型。
• color 为颜色型。

>> type-of(100) "number" >> type-of(100px) "number" >> type-of("asdf") "string" >> type-of(asdf) "string" >> type-of(true) "bool" >> type-of(false) "bool" >> type-of(#fff) "color" >> type-of(blue) "color" >> type-of(1 / 2 = 1) "string"

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 中使用将是没有任何意义的。

unitless()函数

unitless() 函数相对来说简单明了些，只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false：

>> unitless(100) true >> unitless(100px) false >> unitless(100em) false >> unitless(100%) false >> unitless(1 /2 ) true >> unitless(1 /2 + 2 ) true >> unitless(1px /2 + 2 ) false

具体例子，见右侧代码编辑器。右侧代码实现：用户在调用混合宏时，如果用户没有给参数值加上单位，程序会自动加入单位。

comparable()函数

comparable() 函数主要是用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false：

>>

 comparable(2px,1px)

true >> comparable(2px,1%) false >> comparable(2px,1em) false >> comparable(2rem,1em) false >> comparable(2px,1cm) true >> comparable(2px,1mm) true >> 

comparable(2px,1rem)

false >> comparable(2cm,1mm) true