标签:
Sass中自备了一系列的功能函数,包括:
- 字符串函数
- 数字函数
- 列表函数
- 颜色函数
- Introspection函数
- 三元函数
除了Sass中已提供的函数,我们还可以根据自己的需求定义函数,称为自定义函数。
* unquote($string) * :删除字符串中的引号
* quote($string) * :给字符串加引号
unquote()函数
用来删除字符串的引号,如果这个字符串没有引号,则返回原始字符串。
.test1 {
content: unquote("hello demo");
}
.test2 {
content: unquote(‘"Hello Sass!"‘);
}
.test3 {
content: unquote("hello demo" + "Hello Sass!");
}
编译后的CSS为:
.test1 {
content: hello demo;
}
.test2 {
content: "Hello Sass!";
}
.test3 {
content: hello demoHello Sass!;
}
==注意:== unquote()函数能删除每个字符串最前和最后的引号(双引号或单引号),无法删除字符串中间的引号。
* quote()函数 *
quote()函数与unquote()函数功能相反,用来给字符串添加引号,如果字符串自身带有引号,会统一换成双引号。
.test1 {
content: quote(‘hello demo!‘);
}
.test2 {
content: quote("hello demo");
}
.test3 {
content: quote(ImWebDesigner);
}
.test4 {
content: quote(‘ ‘);
}
.test5 {
content: quote(hello + demo + yes);
}
编译出来的CSS为:
.test1 {
content: "hello demo!";
}
.test2 {
content: "hello demo";
}
.test3 {
content: "ImWebDesigner";
}
.test4 {
content: " ";
}
.test5 {
content: "hellodemoyes";
}
需要注意的是:
quote()不能给中间有空格且没有用+号连接的字符串加引号,会报错。
另外,quote() 碰到特殊符号,比如: !、?、> 等,除中折号 - 和 下划线_ 都需要使用双引号括起,否则编译器在进行编译的时候同样会报错。
* to-upper-case() *
将字符串小写字母转换成大写字母
.test{
content: to-upper-case(hellodemo);
}
编译出来的CSS为:
.test{
content: HELLODEMO;
}
* to-lower-case() *
.test{
content: to-upper-case(HELLODEMO);
}
编译出来的CSS为:
.test{
content: hellodemo;
}
需要注意的是 字符串不能加引号,字符串中间不能含有空格,并且除中折号 - 和 下划线_ ,不能含有其他特殊符号,否则会报错
percentage()将一个不带单位的数字转换成百分比形式
当使用百分比布局时:
@for $i from 1 through 5{
.col-#{$i} {
width: percentage($i/5);
}
}
编译出来的CSS为:
.col-1 {
width: 20% ;;
}
.col-2 {
width: 40% ;;
}
.col-3 {
width: 60% ;;
}
.col-4 {
width: 80% ;;
}
.col-5 {
width: 100% ;;
}
需要注意的是: percentage只能将数字变成百分制的表示方式。对于字符串或者带有单位的数字,使用percentage 会报错.
round():将数值进行四舍五入;
.span1{
width: round(12.3px);
}
.span2{
width: round(13.5);
}
.span3{
width: round(12.3abx);
}
编译出来的结果为:
.span1 {
width: 12px;
}
.span2 {
width: 14;
}
.span3 {
width: 12abx;
}
round()函数处理数字时,允许数字带单位,但是这个单位究竟是什么字符,sass并不会检查。仅需要是以数字开头即可。如果以字符串开头,那么round()会报错。
ceil():向上取整;
.span1{
width: 12.3;
}
.span2{
width: 21.8px;
}
编译后的CSS为:
.span1 {
width: 12.3;
}
.span2 {
width: 21.8px;
}
类似的函数还要,floor()函数用于向下取整。
abs(),取绝对值。
参数同ceil()
max()和min()函数
max()返回最大值
min()返回最小值
只能比较相同类型单位,不能对比不同类型的单位。
.span1{
width: min(6,50,15,3,200%);
}
.span2{
width: max(10in,23px);
}
编译出来的CSS为:
.span1 {
width: 3;
}
.span2 {
width: 10in;
}
random()生成0-1之间的随机数
div{
width: random() * 20#{px}
}
span{
width: random()
}
编译出来的CSS为:
div {
width: 1.73254px;
}
span {
width: 0.85449;
}
graph LR
A-->B
标签:
原文地址:http://blog.csdn.net/liuyan19891230/article/details/52264001