Sass 函数介绍

发布于 2021-07-19 21:35:30 字数 18832 浏览 1663 评论 0

在Sass中除了可以定义变量，具有 @extend，%placeholders 和 Mixins 等特性之外，还自备了一系列的函数功能。其实在 Sass 的函数功能中除了颜色函数之外，还具有 字符串函数、数字函数、列表函数、Introspection函数 以及 三元函数 等，当然大家还可以根据需求 自定义函数。

在这篇文章中，我们主要对 Sass 函数中的 字符串函数、数字函数、列表函数、Introspection函数 以及三元函数的功能能使用做一些简单的介绍，希望对初学Sass的同学略有帮助。

字符串函数

字符串函数顾名思意是用来处理字符串的函数。Sass的字符串函数主要包括两个函数：

unquote($string)：删除字符串中的引号；
quote($string)：给字符串添加引号。

unquote() 函数

unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。简单的使用终端来测试这个函数的运行结果：

//SCSS
.test1 {
    content:  unquote('Hello Sass!') ;
}
.test2 {
    content: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}

//CSS
.test1 {
  content: Hello Sass!; }

.test2 {
  content: 'Hello Sass!; }

.test3 {
  content: I'm Web Designer; }

.test4 {
  content: 'Hello Sass!'; }

.test5 {
  content: "Hello Sass!"; }

.test6 {
  content: Hello Sass; }

从测试的效果中可以看出，unquote() 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。

quote() 函数

quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""。如：

//SCSS
.test1 {
    content:  quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}
//CSS
.test1 {
  content: "Hello Sass!"; 
}

.test2 {
  content: "Hello Sass!"; 
}

.test3 {
  content: "ImWebDesigner"; 
}
.test4 {
  content: " "; 
}

使用 quote() 函数增加只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。

.test1 {
    content:  quote(Hello Sass);
}

这样使用，编译器马上会报错：

error style.scss (Line 13: $string: ("Hello" "Sass") is not a string for `quote')

解决方案就是去掉空格，或者加上引号：

.test1 {
    content:  quote(HelloSass);
}
.test1 {
    content:  quote("Hello Sass");
}

同时quote()碰到特殊符号，比如说!、?、>等，除中折号-和下划线_都需要使用双引号括起，否则编译器在进行编译的时候同样会报错：

error style.scss (Line 13: Invalid CSS after "...quote(HelloSass": expected ")", was "!);")
error style.scss (Line 16: Invalid CSS after "...t:  quote(Hello": expected ")", was "?);")

数字函数

Sass中的数字函数提要针对数字方面提供一系列的函数功能：

percentage($value)：将一个不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：将大于自己的小数转换成下一位整数；
floor($value)：将一个数去除他的小数部分；
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值。

看到上面函数的简介，对于熟悉javascript同学而言并不会感觉陌生。因为他们有很多功能都非常类似，接下来对每个函数进行一些简单的测试。

percentage()

percentage()函数主要是将一个不带单位的数字转换成百分比形式：

>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%
>>

如果您转换的值是一个带有单位的值，那么在编译的时候会报错误信息：

>> percentage(2px / 10em)
SyntaxError: $value: 0.2px/em is not a unitless number for `percentage'

round() 函数

round()函数将一个数四舍五入为一个最接近的整数：

>> round(12.3)
12
>> round(12.5)
13
>> round(1.49999)
1
>> round(2.0)
2
>> round(20%)
20%
>> round(2.2%)
2%
>> round(3.9em)
4em
>> round(2.3px)
2px
>> round(2px / 3px)
1
>> round(1px / 3px)
0
>> round(3px / 2em)
2px/em

在 round() 函数中可以携带单位的任何数值。

ceil() 函数

ceil() 函数将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身1的整数。也就是只做入，不做舍的计算：

>> ceil(2.0)
2
>> ceil(2.1)
3
>> ceil(2.6)
3
>> ceil(2.3%)
3%
>> ceil(2.3px)
3px
>> ceil(2.5px)
3px
>> ceil(2px / 3px)
1
>> ceil(2% / 3px)
1%/px
>> ceil(1em / 5px)
1em/px

floor() 函数

floor() 函数刚好与 ceil() 函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算：

>> floor(2.1)
2
>> floor(2.5)
2
>> floor(3.5%)
3%
>> floor(10.2px)
10px
>> floor(10.8em)
10em
>> floor(2px / 10px)
0
>> floor(3px / 1em)
3px/em

abs() 函数

abs() 函数会返回一个数的绝对值。

>> abs(10)
10
>> abs(-10)
10
>> abs(-10px)
10px
>> abs(-2em)
2em
>> abs(-.5%)
0.5%
>> abs(-1px / 2px)
0.5

min() 函数

min() 函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数：

>> min(1,2,1%,3,300%)
1%
>> min(1px,2,3px)
1px
>> min(1em,2em,6em)
1em

不过在 min() 函数中同时出现两种不同类型的单位，将会报错误信息：

>> min(1px,1em)
SyntaxError: Incompatible units: 'em' and 'px'.

max()函数

max() 函数和 min() 函数一样，不同的是，max()函数用来获取一系列数中的最大那个值：

>> max(1,5)
5
>> max(1px,5px)
5px

同样的，如果在max()函数中有不同单位，将会报错：

>> max(1,3px,5%,6)
SyntaxError: Incompatible units: '%' and 'px'.

List 函数

列表函数主要包括一些对列表参数的函数使用，主要包括以下几种：

length($list)：返回一个列表的长度值；
nth($list, $n)：返回一个列表中指定的某个标签值
join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值。

列表函数中的每个函数都有其独特的作用与功能，接下来我们通过命令终端向大家展示每个列表函数的功能与使用。

length() 函数

length() 函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值：

>> length(10px)
1
>> length(10px 20px (border 1px solid) 2em)
4
>> length(border 1px solid)
3

length()函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会把错：

>> length(10px,20px,(border 1px solid),2em)
SyntaxError: wrong number of arguments (4 for 1) for `length'
>> length(1,2px)
SyntaxError: wrong number of arguments (2 for 1) for `length'

nth() 函数

nth()函数用来指定列表中某个位置的值。不过在Sass中，nth()函数和其他语言不同，1是指列表中的第一个标签值，2是指列给中的第二个标签值，依此类推。如：

>> nth(10px 20px 30px,1)
10px
>> nth((Helvetica,Arial,sans-serif),2)
"Arial"
>> nth((1px solid red) border-top green,1)
(1px "solid" #ff0000)

注：在 nth($list,$n) 函数中的$n必须是大于0的整数：

>> nth((1px solid red) border-top green 1 ,0)
SyntaxError: List index 0 must be a non-zero integer for `nth'

join() 函数

join()函数是将两个列表连接合并成一个列表。

>> join(10px 20px, 30px 40px)
(10px 20px 30px 40px)
>> join((blue,red),(#abc,#def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)
>> join((blue,red),(#abc #def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)

不过join()只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错：

>> join((blue red),(#abc, #def),(#dee #eff))
SyntaxError: $separator: (#ddeeee #eeffff) is not a string for `join'

但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个join()函数合并在一起使用：

>> join((blue red), join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

在join()函数中还有一个很有特别的参数$separator，这个参数主要是用来给列表函数连接列表值是，使用的分隔符号，默认值为auto。

join()函数中$separator除了默认值auto之外，还有comma和space两个值，其中comma值指定列表中的列表项值之间使用逗号（,）分隔，space值指定列表中的列表项值之间使用空格（）分隔。

在join()函数中除非明确指定了$separator值，否则将会有多种情形发生：

如果列表中的第一个列表中每个值之间使用的是逗号（,），那么join()函数合并的列表中每个列表项之间使用逗号,分隔：

>> join((blue, red, #eff),(green orange))
(#0000ff, #ff0000, #eeffff, #008000, #ffa500)

但当第一个列表中只有一个列表项，那么join()函数合并的列表项目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用的，如果第二列表项中使用是,分隔，则使用逗号分隔；如果第二列项之间使用的空格符，则使用空格分隔：

>> join(blue,(green, orange))
(#0000ff, #008000, #ffa500)
>> join(blue,(green orange))
(#0000ff #008000 #ffa500)

如果列表中的第一个列表中每个值之间使用的是空格，那么join()函数合并的列表中每个列表项之间使用空格分隔：

>> join((blue green),(red,orange))
(#0000ff #008000 #ff0000 #ffa500)
>> join((blue green),(red orange))
(#0000ff #008000 #ff0000 #ffa500)

如果当两个列表中的列表项小于1时，将会以空格分隔：

>> join(blue,red)
(#0000ff #ff0000)

如此一来，会有多种情形发生，造成使用混乱的情形，如果你无法记得，什么时候会是用逗号分隔合并的列表项，什么时候是使用空格分隔合并的列表项，在些建议大家使用join()函数合并列表项的时候就明确指定$separator参数，用来指定合并的列表中使用什么方式来分隔列表项：

>> join(blue,red,comma)
(#0000ff, #ff0000)
>> join(blue,red,space)
(#0000ff #ff0000)
>> join((blue green),(red,orange),comma)
(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue green),(red,orange),space)
(#0000ff #008000 #ff0000 #ffa500)
>> join((blue, green),(red,orange),comma)
(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue, green),(red,orange),space)
(#0000ff #008000 #ff0000 #ffa500)
>> join(blue,(red,orange),comma)
(#0000ff, #ff0000, #ffa500)
>> join(blue,(red,orange),space)
(#0000ff #ff0000 #ffa500)
>> join(blue,(red orange),comma)
(#0000ff, #ff0000, #ffa500)
>> join(blue,(red orange),space)
(#0000ff #ff0000 #ffa500)

append() 函数

append()函数是用来将某个值插入到列表中，并且处于最末位。

>> append(10px 20px ,30px)
(10px 20px 30px)
>> append((10px,20px),30px)
(10px, 20px, 30px)
>> append(green,red)
(#008000 #ff0000)
>> append(red,(green,blue))
(#ff0000 (#008000, #0000ff))

如果没有明确的指定$separator参数值，其默认值是auto。如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔；如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。

当然，在append()函数中，可以显示的设置$separator参数，如果取值为comma将会以逗号分隔列表项，如果取值为space将会以空格分隔列表项：

>> append((blue green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue green),red,space)
(#0000ff #008000 #ff0000)
>> append((blue, green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue, green),red,space)
(#0000ff #008000 #ff0000)
>> append(blue,red,comma)
(#0000ff, #ff0000)
>> append(blue,red,space)
(#0000ff #ff0000)

zip() 函数

zip()函数将多个列表值转成一个多维的列表：

>> zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

在使用zip()函数时，每个单一的列表个数值必须是相同的：

>> zip(1px 2px 3px, solid , green blue red)
NoMethodError: undefined method `options=' for nil:NilClass
  Use --trace for backtrace.

否则将会出错。

zip()函数中每个单一列表的值对应的取其相同位置值：

|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
|------------|--------------|--------------|--------------|
|    List1   |      1px     |      2px     |      3px     |
|------------|--------------|--------------|--------------|
|    List2   |      solid   |      dashed  |     dotted   |
|------------|--------------|--------------|--------------|
|    List3   |      green   |      blue    |      red     |
|------------|--------------|--------------|--------------|

zip()函数组合出来就成了：

1px solid green, 2px dashed blue, 3px dotted red

index() 函数

index()函数类似于索引一样，主要让你找到某个值在列表中所处的位置。在Sass中，第一个值就是1,第二个值就是2，依此类推：

>> index(1px solid red, 1px)
1
>> index(1px solid red, solid)
2
>> index(1px solid red, red)
3

在index()函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是false，相反就会返回对应的值在列表中所处的位置。

>> index(1px solid red,dotted) //列表中没有找到dotted
false
>> index(1px solid red,solid) //列表中找到solid值，并且返回他的位置值2
2

Introspection 函数

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

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

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

type-of() 函数

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

>> 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

Miscellaneous 函数

在这里把Miscellaneous函数称为三元条件函数，主要因为他和JavaScript中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

if($condition,$if-true,$if-false)

上面表达式的意思是当$condition条件成立时，返回的值为$if-true，否则返回的是$if-false值。

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

自定义函数

自定义函数是用户根据自己一些特殊的需求编写的Sass函数。在很多时候，Sass自带的函数并不能满足功能上的需求，所以很多时候需要自定义一些函数。

例如，我们需要去掉一个值的单位，在这种情形之下,Sass自带的函数是无法帮助我们完成，这个时候我们就需要定义函数：

//去掉一个值的单位，如12px => 12
// eg. strip-units(12px) => 12

@function strip-units($number){
    @return $number / ($number * 0 + 1);
}

上在演示是一个经典的去除单位的自定义函数，除了这个函数之外，大家还可以根据自己需求定义其他的函数，正如前面介绍的 pxToem 和 pxTorem 两个自定义的函数。

总结

在这一节中，主要根据Sass的官网介绍的函数为范本，借助Sass的sass -i命令在终端向大家展示了Sass函数中的字符串函数、数字函数、列表函数、Introspection函数以及三元函数等功能以及使用方法。并且在最后简单的介绍了在Sass中如何自定义Sass的函数。希望这篇文章对于初学者能更好的理解Sass中的自带函数的功能与作用。