SASS详解之函数(function)

最新推荐文章于 2024-09-22 21:45:36 发布

云圣天

最新推荐文章于 2024-09-22 21:45:36 发布

阅读量1.7w

点赞数 2

分类专栏： SESS详解 SASS 文章标签： SASS详解之函数 SASS详解 SASS SASS的函数

本文链接：https://blog.csdn.net/lee_magnum/article/details/12750005

版权

SESS详解同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

SASS

10 篇文章 2 订阅

订阅专栏

　　SASS和其他语言脚本有类似之处。可以利用变量来构建自己的函数，这也是SASS迷人之处之一，原来写CSS还可以像写JavaScript那样拥有自己的逻辑。

　　自定义函数

　　SASS代码

$oneWidth: 10px;
$twoWidth: 40px;

@function widthFn($n) {
  @return $n * $twoWidth + ($n - 1) * $oneWidth;
}

.leng { 
	width: widthFn(5);
}

　　编译后CSS代码

.leng {
  width: 240px;
}

　　通过上面可以看出，SASS中的函数可以使用全局变量，还可以接受像混合(mixin)一样的参数。函数可以有多个语句组成，但是必须设定返回值(return)。但是混合(mixin)就可以不用设置返回值即可操作。函数(function)传入的值也可以带有变量，如下

　　SASS代码

$oneWidth: 10px;
$twoWidth: 40px;

@function widthFn($n) {
  @return $n * $twoWidth + ($n - 1) * $oneWidth;
}

.leng { 
	width: widthFn($n : 5);
}

　　编译后CSS代码

.leng {
  width: 240px;
}

　　字符串函数

　　字符串函数顾名思意是用来处理字符串的函数。Sass的字符串函数主要包括两个函数：unquote($string)——删除字符串中的引号和quote($string)——给字符串添加引号。

　　unquote()函数

　　unquote()函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。简单的使用终端来测试这个函数的运行结果。unquote()函数只能删除字符串最前和最后的成对引号(双引号或单引号)，而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。小例子如下

　　SASS代码

.test1 {
    content:  unquote('梦龙小站!') ;
}
.test2 {
    content: unquote("'梦龙小站!");
}
.test3 {
    content: unquote("I'm 梦龙小站!");
}
.test4 {
    content: unquote("'梦龙小站!'");
}
.test5 {
    content: unquote('"梦龙小站!"');
}
.test6 {
	/*没有引号不能加中文，不然会报错*/
    content: unquote(menglong);
}

　　编译后CSS代码

.test1 {
  content: 梦龙小站!;
}

.test2 {
  content: '梦龙小站!;
}

.test3 {
  content: I'm 梦龙小站!;
}

.test4 {
  content: '梦龙小站!';
}

.test5 {
  content: "梦龙小站!";
}

.test6 {
  /*没有引号不能加中文，不然会报错*/
  content: menglong;
}

　　quote()函数

　　quote()函数刚好与unquote()函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号""。使用quote()函数增加只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。quote()碰到特殊符号，比如说!、?、>等，除中折号-和下划线_都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。小例子如下

　　SASS代码

.test1 {
    content:  quote('梦龙小站!');
}
.test2 {
    content: quote("梦龙小站!");
}
.test3 {
    content: quote(ImMengLong);
    /*
	下面是错误写法
	content: quote(Im Meng Long);
        content: quote(梦龙小站!);
        content: quote("梦龙小站!);
    */
}
.test4 {
    content: quote(' ');
}

　　编译后CSS代码

.test1 {
  content: "梦龙小站!";
}

.test2 {
  content: "梦龙小站!";
}

.test3 {
  content: "ImMengLong";
}

.test4 {
  content: " ";
}

　　数字函数

　　Sass中的数字函数主要是对数字的一些功能。主要有percentage($value)、round($value)、ceil($value)、floor($value)、abs($value)、min($numbers…)和max($numbers…)。下面是用小例子来对他们进行说明。

　　percentage()

　　percentage()函数主要是将一个不带单位的数字转换成百分比形式，如果您转换的值是一个带有单位的值，那么在编译的时候会报错误信息。

　　SASS代码

/*
错误写法，不能带单位
percentage(2px / 10px)
*/

div {
	width:percentage(.2);
}
a {
	width:percentage(20);
}
span {
	width:percentage(2/3);
}

　　编译后CSS代码

div {
  width: 20%;
}

a {
  width: 2000%;
}

span {
  width: 66.66667%;
}

　　round()函数

　　round()函数将一个数四舍五入为一个最接近的整数，在round()函数中可以携带单位的任何数值。

　　SASS代码

.meng1 {
    width:round(.2);
}
.meng2 {
    width:round(12.3);
}
.meng3 {
    width:round(12.5);
}
.meng4 {
    width:round(1.49999);
}
.meng5 {
    width:round(2.2%);
}
.meng6 {
    width:round(20%);
}
.meng7 {
    width:round(3.9em);
}
.meng8 {
    width:round(2.3px);
}
.meng9 {
    width:round(2px / 3px)
}
.meng10 {
    width:round(1px / 3px)
}
.meng11 {
    width:round(3px / 2px)
}

/*简便写法，应用了@for*/
$val : .2 12.3 12.5 1.49999 2.2% 20% 3.9em 2.3px 2px/3px 1px/3px 3px/2px;
@for $i from 1 to 12 {
    .long#{$i} {
        width:round(nth($val, $i));
    }
}

　　编译后CSS代码

.meng1 {
  width: 0;
}

.meng2 {
  width: 12;
}

.meng3 {
  width: 13;
}

.meng4 {
  width: 1;
}

.meng5 {
  width: 2%;
}

.meng6 {
  width: 20%;
}

.meng7 {
  width: 4em;
}

.meng8 {
  width: 2px;
}

.meng9 {
  width: 1;
}

.meng10 {
  width: 0;
}

.meng11 {
  width: 2;
}

/*简便写法，应用了@for*/
.long1 {
  width: 0;
}

.long2 {
  width: 12;
}

.long3 {
  width: 13;
}

.long4 {
  width: 1;
}

.long5 {
  width: 2%;
}

.long6 {
  width: 20%;
}

.long7 {
  width: 4em;
}

.long8 {
  width: 2px;
}

.long9 {
  width: 1;
}

.long10 {
  width: 0;
}

.long11 {
  width: 2;
}

　　ceil()函数

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

　　SASS代码

.meng1 {
    width:ceil(.2);
}
.meng2 {
    width:ceil(12.3);
}
.meng3 {
    width:ceil(12.5);
}
.meng4 {
    width:ceil(1.49999);
}
.meng5 {
    width:ceil(2.2%);
}
.meng6 {
    width:ceil(20%);
}
.meng7 {
    width:ceil(3.9em);
}
.meng8 {
    width:ceil(2.3px);
}
.meng9 {
    width:ceil(2px / 3px)
}
.meng10 {
    width:ceil(1px / 3px)
}
.meng11 {
    width:ceil(3px / 2px)
}

/*简便写法，应用了@for*/
$val : .2 12.3 12.5 12.7 1.49999 2.2% 20% 3.9em 2.3px 2px/3px 1px/3px 3px/2px;
@for $i from 1 to 13 {
    .long#{$i} {
        width:ceil(nth($val, $i));
    }
}

　　编译后CSS代码

.meng1 {
  width: 1;
}

.meng2 {
  width: 13;
}

.meng3 {
  width: 13;
}

.meng4 {
  width: 2;
}

.meng5 {
  width: 3%;
}

.meng6 {
  width: 20%;
}

.meng7 {
  width: 4em;
}

.meng8 {
  width: 3px;
}

.meng9 {
  width: 1;
}

.meng10 {
  width: 1;
}

.meng11 {
  width: 2;
}

/*简便写法，应用了@for*/
.long1 {
  width: 1;
}

.long2 {
  width: 13;
}

.long3 {
  width: 13;
}

.long4 {
  width: 13;
}

.long5 {
  width: 2;
}

.long6 {
  width: 3%;
}

.long7 {
  width: 20%;
}

.long8 {
  width: 4em;
}

.long9 {
  width: 3px;
}

.long10 {
  width: 1;
}

.long11 {
  width: 1;
}

.long12 {
  width: 2;
}

　　floor()函数

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

　　SASS代码

.meng1 {
	width:floor(.2);
}
.meng2 {
	width:floor(12.3);
}
.meng3 {
	width:floor(12.5);
}
.meng4 {
	width:floor(1.49999);
}
.meng5 {
	width:floor(2.2%);
}
.meng6 {
	width:floor(20%);
}
.meng7 {
	width:floor(3.9em);
}
.meng8 {
	width:floor(2.3px);
}
.meng9 {
	width:floor(2px / 3px)
}
.meng10 {
	width:floor(1px / 3px)
}
.meng11 {
	width:floor(3px / 2px)
}

/*简便写法，应用了@for*/
$val : .2 12.3 12.5 12.7 1.49999 2.2% 20% 3.9em 2.3px 2px/3px 1px/3px 3px/2px;
@for $i from 1 to 13 {
	.long#{$i} {
		width:floor(nth($val, $i));
	}
}

　　编译后CSS代码

.meng1 {
  width: 0;
}

.meng2 {
  width: 12;
}

.meng3 {
  width: 12;
}

.meng4 {
  width: 1;
}

.meng5 {
  width: 2%;
}

.meng6 {
  width: 20%;
}

.meng7 {
  width: 3em;
}

.meng8 {
  width: 2px;
}

.meng9 {
  width: 0;
}

.meng10 {
  width: 0;
}

.meng11 {
  width: 1;
}

/*简便写法，应用了@for*/
.long1 {
  width: 0;
}

.long2 {
  width: 12;
}

.long3 {
  width: 12;
}

.long4 {
  width: 12;
}

.long5 {
  width: 1;
}

.long6 {
  width: 2%;
}

.long7 {
  width: 20%;
}

.long8 {
  width: 3em;
}

.long9 {
  width: 2px;
}

.long10 {
  width: 0;
}

.long11 {
  width: 0;
}

.long12 {
  width: 1;
}

　　abs()函数

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

　　SASS代码

.meng1 {
	width:abs(.2);
}
.meng2 {
	width:abs(-0.2);
}
.meng3 {
	width:abs(12.5);
}
.meng4 {
	width:abs(-1.49999);
}
.meng5 {
	width:abs(-2.2%);
}
.meng6 {
	width:abs(20%);
}
.meng7 {
	width:abs(-3.9em);
}
.meng8 {
	width:abs(2.3px);
}
.meng9 {
	width:abs(-2px / 3px)
}
.meng10 {
	width:abs(-1px / 3px)
}
.meng11 {
	width:abs(3px / -2px)
}

/*简便写法，应用了@for*/
$val : .2 -12.3 -12.5 12.7 -1.49999 -2.2% 20% -3.9em 2.3px -2px/3px -1px/3px 3px/-2px;
@for $i from 1 to 13 {
	.long#{$i} {
		width:abs(nth($val, $i));
	}
}

　　编译后CSS代码

.meng1 {
  width: 0.2;
}

.meng2 {
  width: 0.2;
}

.meng3 {
  width: 12.5;
}

.meng4 {
  width: 1.49999;
}

.meng5 {
  width: 2.2%;
}

.meng6 {
  width: 20%;
}

.meng7 {
  width: 3.9em;
}

.meng8 {
  width: 2.3px;
}

.meng9 {
  width: 0.66667;
}

.meng10 {
  width: 0.33333;
}

.meng11 {
  width: 1.5;
}

/*简便写法，应用了@for*/
.long1 {
  width: 0.2;
}

.long2 {
  width: 12.3;
}

.long3 {
  width: 12.5;
}

.long4 {
  width: 12.7;
}

.long5 {
  width: 1.49999;
}

.long6 {
  width: 2.2%;
}

.long7 {
  width: 20%;
}

.long8 {
  width: 3.9em;
}

.long9 {
  width: 2.3px;
}

.long10 {
  width: 0.66667;
}

.long11 {
  width: 0.33333;
}

.long12 {
  width: 1.5;
}

　　min()函数

　　min()函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数。不过在min()函数中同时出现两种不同类型的单位。

　　SASS代码

.meng1 {
	width:min(0.2,-12.3,-12.5,12.7);
}
.meng2 {
	width:min(12.5,12.7,-1.49999,-2.2%,20%);
}
.meng3 {
	width:min(-12.3,12.7,-1.49999,-2.2%,20%,-3.9,2.3,-2/3,-1/3,3/-2);
}

　　编译后CSS代码

.meng1 {
  width: -12.5;
}

.meng2 {
  width: -2.2%;
}

.meng3 {
  width: -12.3;
}

　　max()函数

　　max()函数和min()函数一样，不同的是，max()函数用来获取一系列数中的最大那个值。在max()函数中有不同单位，将会报错。

　　SASS代码

.meng1 {
	width:max(0.2,-12.3,-12.5,12.7);
}
.meng2 {
	width:max(12.5,12.7,-1.49999,-2.2%,20%);
}
.meng3 {
	width:max(-12.3,12.7,-1.49999,-2.2%,20%,60,-3.9,2.3,-2/3,-1/3,3/-2);
}

　　编译后CSS代码

.meng1 {
  width: 12.7;
}

.meng2 {
  width: 20%;
}

.meng3 {
  width: 60;
}

　　List函数

　　列表函数主要包括一些对列表参数的函数使用，主要包括：length($list)、nth($list, $n)、join($list1, $list2, [$separator])、append($list1, $val, [$separator])、zip($lists…)和index($list, $value)。列表函数中的每个函数都有其独特的作用与功能，接下来我们通过命令终端向大家展示每个列表函数的功能与使用。下面是用小例子来对他们进行说明。

　　length()函数

　　length()函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值。length()函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会把错。

　　SASS代码

$len1 : 100px;
$len2 : 100px 3em (border 1px solid red) 30% 0.2;
$len3 : arial verdana sans-serif;

.meng1 {
	width:length($len1);
}
.meng2 {
	width:length($len2);
}
.meng3 {
	width:length($len3);
}

　　编译后CSS代码

.meng1 {
  width: 1;
}

.meng2 {
  width: 5;
}

.meng3 {
  width: 3;
}

　　nth()函数

　　nth()函数用来指定列表中某个位置的值。不过在Sass中，nth()函数和其他语言不同，1是指列表中的第一个标签值，2是指列给中的第二个标签值，依此类推。在nth($list,$n)函数中的$n必须是大于0的整数。

　　SASS代码

　　编译后CSS代码

　　SASS中的函数(function)可以算是SASS中的点睛之笔，不过个人认为没有混合(mixin)和继承(extend)好用。

云圣天

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录