Sass基础——Sass函数
特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在Sass中除了可以定义变量,具有@extend,%placeholders和Mixins等特性之外,还自备了一系列的函数功能。前面在《Sass基础——颜色函数》一文中主要向大家介绍了Sass函数中有关于颜色函数的功能以及使用。其实在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):将大于自己的小数转换成下一位整数;