SASS详解之函数(function)

你的名字 2022-09-17 11:21 430阅读 0赞

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)好用。