2-2 Sass的函数功能-字符串与数字函数
Sass的函数简介
在 Sass 中除了可以定义变量，具有 @extend、%placeholder 和 mixins 等特性之外，还自备了一系列的函数功能。其主要包括：
- 字符串函数
- 数字函数
- 列表函数
- 颜色函数
- Introspection 函数
- 三元函数等
当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数。
下面将给大家详细介绍前 4 种最常用的函数。
字符串函数-unquote()函数
字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：
- unquote($string)：删除字符串中的引号；
- quote($string)：给字符串添加引号。
1、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 代码：
//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 代码：
//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 “?);")
字符串函数-To-upper-case()、To-lower-case()
1、To-upper-case()
To-upper-case() 函数将字符串小写字母转换成大写字母。如：
//SCSS
.test {
text: to-upper-case(aaaaa);
text: to-upper-case(aA-aAAA-aaa);
}
编译出来的 css 代码：
//CSS
.test {
text: AAAAA;
text: AA-AAAA-AAA;
}
2、To-lower-case()
To-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母：
//SCSS
.test {
text: to-lower-case(AAAAA);
text: to-lower-case(aA-aAAA-aaa);
}
编译出来的 css 代码：
//CSS
.test {
text: aaaaa;
text: aa-aaaa-aaa;
}
数字函数简介
Sass 中的数字函数提要针对数字方面提供一系列的函数功能：
- percentage($value)：将一个不带单位的数转换成百分比值；
- round($value)：将数值四舍五入，转换成一个最接近的整数；
- ceil($value)：将大于自己的小数转换成下一位整数；
- floor($value)：将一个数去除他的小数部分；
- abs($value)：返回一个数的绝对值；
- min($numbers…)：找出几个数值之间的最小值；
- max($numbers…)：找出几个数值之间的最大值；
- random(): 获取随机数
看到上面函数的简介，对于熟悉Javascript 同学而言并不会感觉陌生。因为他们有很多功能都非常类似，接下来对每个函数进行一些简单的测试 。
数字函数-percentage()
1、percentage()
percentage()函数主要是将一个不带单位的数字转换成百分比形式：
>> percentage(.2) 20% >> percentage(2px / 10px) 20% >> percentage(2em / 10em) 20% >>
.footer{
width : percentage(.2)
}
编译后的 css 代码：
.footer{
width : 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
.footer {
width:round(12.3px)
}
编译后的 css 代码：
.footer {
width: 12px;
}
在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
.footer {
width:ceil(12.3px);
}
编译后的 css 代码：
.footer {
width: 13px;
}
数字函数-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
.footer {
width:floor(12.3px);
}
编译后的 css 代码：
.footer {
width: 12px;
}
数字函数-abs()函数
abs( ) 函数会返回一个数的绝对值。
>> abs(10) 10 >> abs(-10) 10 >> abs(-10px) 10px >> abs(-2em) 2em >> abs(-.5%) 0.5% >> abs(-1px / 2px) 0.5
.footer {
width:abs(-12.3px);
}
编译后的 css 代码：
.footer {
width: 12.3px;
}
数字函数-min()函数、max()函数
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'.
数字函数-random()函数
random() 函数是用来获取一个随机数：
>> random() 0.03886 >> random() 0.66527 >> random() 0.8125 >> random() 0.26839 >> random() 0.85063
