sass 函数

64 0

函数部分比较少用,有时间我再来细看,这里扒了一下简书的文章。

文章来自:链接

1. 字符串函数

  • unquote($string):删除字符串中的引号;
  • quote($string):给字符串添加引号;
  • To-upper-case($string):将字符串小写字母转换为大写字母
  • To-lower-case($string):将字符串大写字母转换为小写字母
(1) unquote($string)

unquote函数主要功能是删除字符串中的引号:

  • 不管是双引号还是单引号包裹的字符串,引号皆被去掉;
  • 只能删除字符串最前边和最后边的引号,没法去掉中间的引号;
  • 如果字符串没有带引号,则返回原字符串;
  • 若引号中,有半个不成对的引号。
//SCSS
.demo1 { content: unquote('Hello Sass') ; }
.demo2 { content: unquote("Hello Sass"); }
.demo3 { content: unquote("Hello' Sass"); }
.demo4 { content: unquote("'Hello Sass'"); }
.demo5 { content: unquote('"Hello Sass"'); }
.demo6 { content: unquote(Hello Sass);}
//CSS
.demo1 { content: Hello Sass; }
.demo2 { content: Hello Sass; }
.demo3 { content: Hello' Sass; }
.demo4 { content: 'Hello Sass'; }
.demo5 { content: "Hello Sass"; }
.demo6 { content: Hello Sass; }
(2) quote($string)

quote函数主要功能是给字符串添加引号:

  • 若字符串本身带有引号,就不添加;
  • 若字符串带有单引号,则跟换为双引号;
  • 若双引号中有单引号,则不变,单引号不受影响;
  • 若字符串中间有空格或者半块的单引号、双引号时,需要用单引号或双引号括起,不然编译会报错;
  • 碰到特殊符号,比如: !、?、> 等,除中折号 - 和下划线_ 都需要使用双引号括起,否则编译器在进行编译的时候同样会报错:
//SCSS
.demo1 { content: quote('Hello Sass') ; }
.demo2 { content: quote("Hello Sass"); }
.demo3 { content: quote("Hello' Sass"); }
.demo4 { content: quote("'Hello Sass'"); }
.demo5 { content: quote('"Hello Sass"'); }
.demo6 { content: quote(HelloSass);}
//CSS
.demo1 { content: "Hello Sass"; }
.demo2 { content: "Hello Sass"; }
.demo3 { content: "Hello' Sass"; }
.demo4 { content: "'Hello Sass'"; }
.demo5 { content: '"Hello Sass"'; }
.demo6 { content: "HelloSass"; }

2. 数字函数

  • percentage($value):将不带单位的数转换成百分比值;
  • round($value):将数值四舍五入,转换成一个最接近的整数;
  • ceil($value):向上取整;
  • floor($value):向下取整;
  • abs($value):取数的绝对值;
  • min($numbers…):找出几个数值之间的最小值;
  • max($numbers…):找出几个数值之间的最大值;
  • random(): 获取随机数

    Sass的数字函数和JavaScript的Math对象方法基本相似:
    
//SCSS
.demo1 {
  width : percentage(.2); //转换成百分比值
  height: percentage(2px / 10px);
  margin: percentage(2em / 10em);
}
.demo2 {
  width: round(12.3px); //四舍五入,两边单位不统一会报错
  height: round(2px / 3px);
  margin: round(2.2%);
}
.demo3 {
  width: ceil(2.3px); //向上取整
  height: ceil(2px / 3px);
  margin: ceil(2.8%);
}
.demo4 {
  width: floor(2.3px); //向下取整
  height: floor(2px / 3px);
  margin: floor(2.8%);
}
.demo5{
  width: abs(2.3px);  //绝对值
  height: min(1,2,1%,3,300%); //找出最小值
  margin: max(1px,5px); //找出最大值
  padding:random(); //随机数
}
//CSS
.demo1 {
  width: 20%;
  height: 20%;
  margin: 20%; }

.demo2 {
  width: 12px;
  height: 1;
  margin: 2%; }

.demo3 {
  width: 3px;
  height: 1;
  margin: 3%; }

.demo4 {
  width: 2px;
  height: 0;
  margin: 2%; }

.demo5 {
  width: 2.3px;
  height: 1%;
  margin: 5px;
  padding: 0.4669285352; }

3. 列表函数

  • length($list):返回一个列表的长度值;
  • nth($list, $n):返回一个列表中指定的某个标签值;
  • join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
  • append($list1, $val, [$separator]):将某个值放在列表的最后;
  • zip($lists…):将几个列表结合成一个多维的列表;
  • index($list, $value):返回一个值在列表中的位置值。
//SCSS
.demo1 {
  width : length(10px);   //返回列表清单中有多少个值,空格隔开,不能使用逗号。
  height:  length(border 1px solid)  //同一个列表里,可以是不同类型、不同单位的值
}
.demo2 {
  width: nth((Helvetica,Arial,sans-serif),2);   //指定列表中某个位置的值,1是指列表中的第一个标签值,以此类推。
  height: nth((1px solid red) border-top green,1);
}
.demo3 {
  margin: join((10px 20px),(30px 40px));  //将两个列表连接合并成一个列表,不同列表之间用逗号隔开。
  padding: append((10px,20px,20px),30px);  //将某个值插入到列表中,并且处于最末位
  border: zip(1px 2px 3px,solid dashed dotted) ;  //多个列表值转成一个多维的列表,每个单一的列表个数值必须是相同
}
.demo4 {
  width: index(1px solid red, 1px);   //返回对应的值在列表中所处的位置,第一个值就是1,以此类推。
  height:  index(1px solid red, yellow)  //如果指定的值不在列表中,那么返回的值将是false著作权归作者所有。
}
//CSS
.demo1 {
  width: 1;
  height: 3;
}
.demo2 {
  width: Arial;
  height: 1px solid red;
}
.demo3 {
  margin: 10px 20px 30px 40px;
  padding: 10px, 20px, 20px, 30px;
  border: 1px solid, 2px dashed, 3px dotted;
}
.demo4 {
  width: 1;
}

4. Introspection函数

  • type-of($value):返回一个值的类型;
  • unit($number):返回一个值的单位;
  • unitless($number):判断一个值是否带有单位;
  • comparable($number-1, $number-2):判断两个值是否可以做加、* 减和合并.
//SCSS
.demo1 {
    content:type-of(100);  //判断一个值是属于什么类型
    content:type-of(100px);
    content:type-of(asdf);
    content: type-of(blue);
  }
.demo2 {
  content: unit(10px * 3em);  //获取一个值所使用的单位
  content: unit(10px * 2em / 3cm / 1rem);
}
.demo3 {
  content: unitless(100px);  //判断一个值是否带有单位
  content:  unitless(1 /2 + 2 );
}
.demo3 {
  content: comparable(2px,1px);  //断两个数是否可以进行加,减以及合并
  content: comparable(2px,1em);
}
//CSS
.demo1 {
  content: number;
  content: number;
  content: string;
  content: color;
}
.demo2 {
  content: "em*px";
  content: "em/rem";
}
.demo3 {
  content: false;
  content: true;
}
.demo3 {
  content: true;
  content: false;
}

5. 三元条件函数

if($condition,$if-true,$if-false);

判断$condition,如果条件成立,则返回$if-true的结果,如果条件不成立,则返回$if-false的结果。

//SCSS
.demo1{width:if(true,8em,20em)}
.demo2{height:if(false,8em,20em)}
//CSS
.demo1 { width: 8em;}
.demo2 {height: 20em;}

6.Maps的函数

  • map-get($map,$key):根据给定的 key 值,返回 map 中相关的值;
  • map-has-key($map,$key):根据给定的 key 值判断 map 是否有对应的 value 值,如果有返回 true,否则返回 false。
  • map-keys($map):返回 map 中所有的 key。
  • map-values($map):返回 map 中所有的 value。
  • map-merge($map1,$map2):将两个 map 合并成一个新的 map。
  • map-remove($map,$key):从 map 中删除一个 key,返回一个新 map。
  • keywords($args):返回一个函数的参数,这个参数可以动态的设置 key 和 value。

Sass中map的形式如下:
用 $ 加上命名空间来声明 map,后面紧接是一个小括号 (),将数据以 key:value 的形式赋予,key 和 value 是成对出现。

$map: (
    $key1: value1,
    $key2: value2,
    $key3: value3
)

对应的一些例子:

//SCSS
$colors: (//$map
        redColor: #FF2C60, // $key:value
        greenColor:#168009,
        blueColor:#7BA5FF
);

@if map-has-key($colors, meat) {  //当 $map 中有这个 $key,则函数返回 true,否则返回 false。
  div {
    color: map-get($colors, redColor);   //根据 $key 参数,返回 $key 在 $map 中对应的 value 值。
    color: map-get($colors, yellowColor);   //如果 $key 不存在 $map中,将返回 null 值,并且不会把css编译出来。
  }
} @else {
  div {
    color: green
  }
}

.btn-#{nth(map-keys($colors),1)} {     //函数将会返回 $map 中的所有 key,并通过nth()获取某值
  color: nth(map-values($colors), 2);   //函数将会返回 $map 中的所有 value,并通过nth()获取某值
}

$div1: (
        text: #f36,
        link: #f35,
        border: #384
);
$div2: (
        width:300px,
        height:100px,
        z-index:3
);
$newMap: map-merge($div1, $div2);   //map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并,然后得到一个新的 $map。
div {
  @each $x, $y in $newMap {
    #{$x}: #{$y};
  }
}

$newMap: map-remove($div1, link);   // 用来删除当前 $map 中的某一个 $key,从而得到一个新的 map。其返回的值还是一个 map。
div {
  @each $x, $y in $newMap {
    #{$x}: #{$y};
  }
}
//CSS
div {
  color: green;
}

.btn-redColor {
  color: #168009;
}

div {
  text: #f36;
  link: #f35;
  border: #384;
  width: 300px;
  height: 100px;
  z-index: 3;
}

div {
  text: #f36;
  border: #384;
}

7.颜色函数

  • rgb($red,$green,$blue):根据绿三个值创建一个颜色;
  • rgba($red,$green,$blue,$alpha):根据绿透明度值创建一个颜色;
  • red($color):从一个颜色中获取其中红色值;
  • green($color):从一个颜色中获取其中绿色值;
  • blue($color):从一个颜色中获取其中蓝色值;
  • mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
//SCSS
.demo1 {
  color: rgb(100, 148, 210);   //根据红、绿、蓝三个值创建一个颜色,输入的是三个0-255之间的数字值
  background-color: rgba(255, 43, 75, 0.8);   //根据红、绿、蓝和透明度值创建一个颜色

}
.demo2 {
  content: red(#f36);   //从一个颜色中获取其红色值
  @if red(#f36) > 50 {   //当颜色的红色值大于50使用白色,否则使用黑色
    color: #fff;
  } @else{
    color: #000;
  }
}
.demo3 {
  color:mix(#f00, #00f);   //把两种颜色按照一定的比例混合在一起
  color: mix(#f00, #00f, 25%)
}
//CSS
.demo1 {
  color: #6494d2;
  background-color: rgba(255, 43, 75, 0.8);
}
.demo2 {
  content: 255;
  color: #fff;
}
.demo3 {
  color: purple;
  color: #4000bf;
}

8.自定义函数

1. 创建和使用自定义函数

Sass和其他脚本语言有类似之处,可以利用变量来构建自己的函数,这使Sass可以像写JavaScript那样拥有自己的逻辑。下面是Sass自定义函数的基本结构:

@function function-name($args) {
    @return value-to-be-returned;
}
body{
  font-size: function-name($args);
}
  • 创建自定义函数需要两个Sass指令, @function和 @return。前者创建函数,后者表明了函数将返回的值
  • function-name代表函数名,在Sass中function-name和 function_name是相同的函数,所以可使用破折号或下划线调用函数,无论命名时使用的是哪个。
  • 传递到函数中的参数$args是可选的,通常会使用传递过去的参数进行运算,也可能是一些所有函数都可以访问的全局变量。
//SCSS
@function column-width($col, $total) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width(3, 8);
}
.col-5 {
  width: column-width(5, 8);
}
//CSS
.col-3 {  width: 37.5%; }
.col-5 {  width: 62.5%; }

2. 关键字参数

传参的时候有时候会不知道每个参数是什么意思,参数之间是一个什么样的顺序。为了解决这个问题,Sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参,参数顺序就不必再在乎了,只需要保证没有漏掉参数即可:

//SCSS
@function column-width($col, $total) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width($col:3, $total:8);
}
.col-5 {
  width: column-width($total:5,$col:8);
}
//CSS
.col-3 {  width: 37.5%; }
.col-5 {  width: 160%; }

3. 默认参数

为了在使用函数是不必传入所有的参数,我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式,默认值可以是任何有效的css属性值,甚至是其他参数的引用。

//SCSS
@function column-width($col:3, $total:8) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width($col:2, $total:4);
}
.col-5 {
  width: column-width();
}
//CSS
.col-3 {  width: 50%; }
.col-5 {  width: 37.5%; }
0
  • 本文分类:SASS
  • 本文标签:sass 函数
  • 流行热度:已超过 64 人围观了本文
  • 发布日期:2020年04月20日 - 22时09分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码