首页 > 代码库 > Introspection 函数

Introspection 函数

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

 

 

Introspection 函数