首页 > 代码库 > 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 函数
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。