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

时间： 2024-10-01 15:07:36

Introspection 函数的相关文章

Sass函数：Introspection 函数 -type-of()

type-of() 函数主要用来判断一个值是属于什么类型: 返回值: number 为数值型. string 为字符串型. bool 为布尔型. color 为颜色型. >> type-of(100) "number" >> type-of(100px) "number" >> type-of("asdf") "string" >> type-of(asdf) "str

10天精通Sass 之处理字符串与数字的函数

Sass的函数简介 Sass中自备了一系列的功能函数,包括: - 字符串函数 - 数字函数 - 列表函数 - 颜色函数 - Introspection函数 - 三元函数除了Sass中已提供的函数,我们还可以根据自己的需求定义函数,称为自定义函数. 字符串函数 * unquote($string) * :删除字符串中的引号 * quote($string) * :给字符串加引号 unquote()函数用来删除字符串的引号,如果这个字符串没有引号,则返回原始字符串. .test1 { conte

Sass控制命令及函数知识整理

2017-07-07 20:17:17 最底部附结构图(实在是结构图太长了没办法) 2017-06-22 09:11:43 一.Sass的控制命令 [email protected]语句 @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块. 在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. 示例::控制一个元素隐藏或显示的代码, 原理:定义一个混合宏,通过 @

Sass函数--列表函数

列表函数简介列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值 join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表: append($list1, $val, [$separator]):将某个值放在列表的最后: zip($lists…):将几个列表结合成一个多维的列表: index($list, $value):返

10天精通Sass 之 Sass列表函数

列表函数主要有: length($list):返回一个列表的长度值: nth(list,n):返回一个列表中指定的某个标签值 join(list1,list2, [$separator]):将两个列给连接在一起,变成一个列表: append(list1,val, [$separator]):将某个值放在列表的最后: zip($lists-):将几个列表结合成一个多维的列表: index(list,value):返回一个值在列表中的位置值. length($list)返回一个列表的长度值 .spa

Sass语言的一些函数

unquote()函数 unquote()函数主要是用来删除一个字符串中的引号,如果这个字符串没有带有引号,将返回原始的字符串.简单的使用终端来测试这个函数的运行结果: //SCSS?? .test1?{?? ????content:?unquote('Hello?Sass!');?? }.test2?{?? ????content:?unquote("'Hello?Sass!");?? }.test3?{?? ????content:?unquote("I'm?Web?De

sass的函数简介

Sass的函数简介在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: 字符串函数数字函数列表函数颜色函数 Introspection 函数三元函数等当然除了自备的函数功能之外,我们还可以根据自己的需求定义函数功能,常常称之为自定义函数. 下面将给大家详细介绍前 4 种最常用的函数. 字符串函数-unquote()函数字符串函数顾名思意是用来处理字符串的函数.Sass 的字符串函数主要

sass学习--sass的函数功能（进阶篇）

1.字符串功能: unquote($string):删除字符串中的引号: quote($string):给字符串添加引号: To-upper-case($string):将字符串小写字母转换为大写字母 To-lower-case($string):将字符串大写字母转换为小写字母 unquote($string): //sass:unquote($string) .test2 { content: unquote("'Hello Sass!"); } .test3 { content:

Sass 基本函数

Sass 中的常用函数一.字符串函数 1. unquote($string): 删除字符串前后的引号,删除一对引号,如果这个字符串没有带有引号,将返回原始的字符串. 示例: .text1 { content: unquote("'hello'");} 2. quote($string): 给字符串添加引号,而且字符串中间有单引号或者空格时,需要用单引号或双引号括起,否则编译的时候将会报错(解决方案就是去掉空格,或者加上引号).同时 quote() 碰到特殊符号,比如: !.?.>