SASS详解之函数(function)

最新推荐文章于 2023-04-28 10:40:41 发布

云圣天

最新推荐文章于 2023-04-28 10:40:41 发布

阅读量1.6w

点赞数 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
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SASS详解之函数(function)

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

扫一扫

专栏目录

SASS详解之函数(function)

自定义函数

字符串函数

unquote()函数

quote()函数

数字函数

percentage()

round()函数

ceil()函数

floor()函数

abs()函数

min()函数

max()函数

List函数

length()函数

nth()函数

“相关推荐”对你有帮助么？

　　自定义函数

　　字符串函数

　　unquote()函数

　　quote()函数

　　数字函数

　　percentage()

　　round()函数

　　ceil()函数

　　floor()函数

　　abs()函数

　　min()函数

　　max()函数

　　List函数

　　length()函数

　　nth()函数