[ sass/scss ] Sass 函数功能汇总

本文介绍Sass自备的字符串函数、数字函数、列表函数、Introspection函数、三元函数等等。

1. 字符串函数

unquote($string) 删除字符串中的引号

• 不管是双引号还是单引号包裹的字符串，引号皆被去掉；
• 只能删除字符串最前边和最后边的引号，没法去掉中间的引号；
• 如果字符串没有带引号，则返回原字符串；
• 若引号中，有半个不成对的引号。

/* 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; }

quote($string) 给字符串添加引号

• 若字符串本身带有引号，就不添加；
• 若字符串带有单引号，则跟换为双引号；
• 若双引号中有单引号，则不变，单引号不受影响；
• 若字符串中间有空格或者半块的单引号、双引号时，需要用单引号或双引号括起，不然编译会报错;
• 碰到特殊符号，比如： !、?、> 等，除中折号 - 和下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。

/* 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"; }

to-upper-case($string) 将字符串小写字母转换为大写字母

/* scss */
.demo { content: to-upper-case('Hello Sass'); }

/* css */
.demo { content: "HELLO SASS"; }

to-lower-case($string) 将字符串大写字母转换为小写字

/* scss */
.demo { content: to-lower-case('Hello Sass'); }

/* css */
.demo { content: "hello sass"; }

2. 数字函数

percentage($value)：将不带单位的数转换成百分比值

/* scss */
.demo {
  width : percentage(.2);
  height: percentage(2px / 10px);
  margin: percentage(2em / 10em);
}

/* css */
.demo {
  width: 20%;
  height: 20%;
  margin: 20%;
}

round($value)：将数值四舍五入，转换成一个最接近的整数

/* scss */
.demo {
  // 四舍五入，两边单位不统一会报错
  width: round(12.3px); 
  height: round(2px / 3px);
  margin: round(2.2%);
}

/* css */
.demo {
  width: 12px;
  height: 1;
  margin: 2%;
}

ceil($value)：向上取整

/* scss */
.demo {
  width: ceil(2.3px);
  height: ceil(2px / 3px);
  margin: ceil(2.8%);
}

/* css */
.demo {
  width: 3px;
  height: 1;
  margin: 3%;
}

floor($value)：向下取整

/* scss */
.demo {
  width: floor(2.3px);
  height: floor(2px / 3px);
  margin: floor(2.8%);
}

/* css */
.demo {
  width: 2px;
  height: 0;
  margin: 2%;
}

abs($value)：取数的绝对值

/* scss */
.demo {
  width: abs(2.3px);
  height: abs(-2.3px);
}

/* css */
.demo {
  width: 2.3px;
  height: 2.3px;
}

min($numbers…)：找出几个数值之间的最小值

/* scss */
.demo {
  height: min(1,2,1%,3,300%); 
}

/* css */
.demo {
  height: 1%;
}

max($numbers…)：找出几个数值之间的最大值

/* scss */
.demo {
  margin: max(1px,5px);
}

/* css */
.demo {
  margin: 5px;
}

random(): 获取随机数

/* scss */
.demo {
  padding:random();
}

/* css */
.demo {
  padding: 0.4669285352;
}

3. 列表函数

length($list) 返回一个列表的长度值

/* scss */
$arr: 1, 2, 3, 4;
$arr2: 1 2 3 4;
$arr3: (border 1px solid);
.demo {
  content: length($arr);
  content: length($arr2);
  content: length($arr3);
}

/* css */
.demo {
  content: 4;
  content: 4;
  content: 3;
}

nth($list, $n) 返回一个列表中指定的某个标签值

/* scss */
$arr: 1px, 2px;
.demo {
  width: nth($arr, 1);
  height: nth($arr, 2);
}

/* css */
.demo {
  width: 1px;
  height: 2px;
}

join($list1, $list2,[$separator]) 将两个列给连接在一起，变成一个列表

/* scss */
.demo {
  margin: join((10px 20px),(30px 40px));
}

/* css */
.demo {
  margin: 10px 20px 30px 40px;
}

append($list1, $val,[$separator]) 将某个值放在列表的最后

/* scss */
.demo {
  padding: append((10px,20px,20px),30px);
}

/* css */
.demo {
  padding: 10px, 20px, 20px, 30px;
}

zip($lists…) 将几个列表结合成一个多维的列表

/* scss */
.demo {
  border: zip(1px 2px 3px,solid dashed dotted);
}

/* css */
.demo {
  border: 1px solid, 2px dashed, 3px dotted;
}

index($list, $value) 返回一个值在列表中的位置值

/* scss */
.demo {
  // 返回对应的值在列表中所处的位置,第一个值就是1,以此类推。
  width: index(1px solid red, 1px);
  // 如果指定的值不在列表中，那么返回的值将是false
  height: index(1px solid red, yellow)
}

/* css */
.demo {
  width: 1;
}

4. 内省函数

type-of($value) 返回一个值的类型

/* scss */
.demo {
  content:type-of(100);
  content:type-of(100px);
  content:type-of(abcd);
  content: type-of(blue);
}

/* css */
.demo {
  content: number;
  content: number;
  content: string;
  content: color;
}

unit($number) 返回一个值的单位

/* scss */
.demo {
  content: unit(10px);
  content: unit(10px * 3em);
  content: unit(10px * 2em / 3cm / 1rem);
}

/* css */
.demo {
  content: "px";
  content: "em*px";
  content: "em/rem";
}

unitless($number) 判断一个值是否没有单位

/* scss */
.demo {
  content: unitless(100px);
  content: unitless(100);
}

/* css */
.demo {
  content: false;
  content: true;
}

comparable($number-1, $number-2) 判断两个值是否可以做加、* 减和合并

/* scss */
.demo {
  content: comparable(2px, 1px);
  content: comparable(2px, 1em);
}

/* css */
.demo {
  content: true;
  content: false;
}

5. 三元条件函数

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

/* scss */
.demo {
  width: if(true, 8em, 20em);
  height: if(false, 8em, 20em);
}

/* css */
.demo {
  width: 8em;
  height: 20em;
}

6. Map的函数

map-get($map,$key) 根据给定的 key 值，返回 map 中相关的值

/* scss */
$map: ( a: hello, b: world );
.demo {
  content: map-get($map, a);
}

/* css */
.demo { content: hello; }

map-has-key($map,$key) 根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false

/* scss */
$map: ( a: hello, b: world );
.demo {
  content: map-has-key($map, a);
  content: map-has-key($map, c);
}

/* css */
.demo {
  content: true;
  content: false; 
}

map-keys($map) 返回 map 中所有的 key

/* scss */
$map: ( a: hello, b: world );
.demo {
  content: map-keys($map);
}

/* css */
.demo {
  content: a, b;
}

map-values($map) 返回 map 中所有的 value

/* scss */
$map: ( a: hello, b: world );
.demo {
  content: map-values($map);
}

/* css */
.demo {
  content: hello, world;
}

map-merge($map1,$map2) 将两个 map 合并成一个新的 map

/* scss */
$map: ( padding: 10px, margin: 10px );
$map2: ( font-size: 14px );
.demo {
  @each $key, $value in map-merge($map, $map2) {
    #{$key}: $value;
  }
}

/* css */
.demo {
  padding: 10px;
  margin: 10px;
  font-size: 14px;
}

map-remove($map,$key) 从 map 中删除一个 key，返回一个新 map

/* scss */
$map: (
  padding: 10px,
  margin: 10px,
  font-size: 14px
);
.demo {
  @each $key, $value in map-remove($map, padding) {
    #{$key}: $value;
  }
}

/* css */
.demo {
  margin: 10px;
  font-size: 14px;
}

keywords($args) 返回一个函数的参数，这个参数可以动态的设置 key 和 value

函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现，其中 $args变成key(会自动去掉$符号)，而 $args 对应的值就是value。

/* scss */
@mixin map($args...){
    @debug keywords($args);
}

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);

// sh
DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

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);
  background-color: rgba(255, 43, 75, 0.8);

}
.demo2 {
  content: red(#f36);
  @if red(#f36) > 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;
}