sass学习--sass的函数功能（进阶篇）

Posted 2020-07-29 马灿发

1.字符串功能：

• unquote（$string）:删除字符串中的引号；
• quote（$string）：给字符串添加引号；
• To-upper-case（$string）：将字符串小写字母转换为大写字母
• To-lower-case（$string）：将字符串大写字母转换为小写字母

unquote($string):

//sass:unquote($string)
.test2 {
    content: unquote("‘Hello Sass!");
}
.test3 {
    content: unquote("I‘m Web Designer");
}
.test4 {
    content: unquote("‘Hello Sass!‘");
}
.test5 {
    content: unquote(‘"Hello Sass!"‘);
}
//css
.test2 {
  content: ‘Hello Sass!; }

.test3 {
  content: I‘m Web Designer; }

.test4 {
  content: ‘Hello Sass!‘; }

.test5 {
  content: "Hello Sass!"; }

注意： unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。

quote($string):

//SCSS
.test1 {
    content:  quote(‘Hello Sass!‘);
}
.test2 {
    content: quote("Hello Sass!");
}

//CSS
.test1 {
  content: "Hello Sass!";
}
.test2 {
  content: "Hello Sass!";
}

quote() 函数用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 “”。

使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错:

.test1 {
    content:  quote(Hello Sass);//字符串中间有空格，编译报错
}

//解决方案
.test1 {
    content:  quote(HelloSass);//去空格
}
.test1 {
    content:  quote("Hello Sass");//加引号
}

注意：quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译时也会报错！

To-upper-case($sting)：

//SCSS
.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}

To-lower-case($string):

//SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}

---

2.数字函数

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

percentage($value):

>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%

round($number):

>> round(12.3)
12
>> round(12.5)
13
>> round(20%)
20%
>> round(2.2%)
2%
>> round(2px / 3px)
1
>> round(1px / 3px)
0

ceil($number):向上取整

>> ceil(2.0)
2
>> ceil(2.1)
3
>> ceil(2.6)
3
>> ceil(2.3%)
3%
>> ceil(2.3px)
3px
>> ceil(2.5px)
3px
>> ceil(2px / 3px)
1

floor($number)：向下取整

>> floor(2.1)
2
>> floor(2.5)
2
>> floor(3.5%)
3%
>> floor(10.2px)
10px
>> floor(10.8em)
10em
>> floor(2px / 10px)
0

abs($number):取绝对值

>> abs(10)
10
>> abs(-10)
10
>> abs(-10px)
10px
>> abs(-2em)
2em
>> abs(-.5%)
0.5%
>> abs(-1px / 2px)
0.5

min($List):取多个数值中最小的

>> min(1,2,1%,3,300%)
1%
>> min(1px,2,3px)
1px
>> min(1em,2em,6em)
1em

max($list):取最大

>> max(1,5)
5
>> max(1px,5px)
5px

random([$limit])：取随机数

>> random()
0.03886
>> random(200)
174

---

3.列表函数

• length($list)：返回一个列表的长度值;
• nth($list, $n)：返回一个列表中指定的某个标签值;
• join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
• append($list1, $val, [$separator])：将某个值放在列表的最后；
• zip($lists…)：将几个列表结合成一个多维的列表；
• index($list, $value)：返回一个值在列表中的位置值。

length($list): 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错：

>> length(10px)
1
>> length(10px 20px (border 1px solid) 2em)
4
>> length(border 1px solid)
3

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

>> nth(10px 20px 30px,1)
10px
>> nth((Helvetica,Arial,sans-serif),2)
"Arial"
>> nth((1px solid red) border-top green,1)
(1px "solid" #ff0000)

join($list1, $list2, [$separator]) :只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错。

>> join(10px 20px, 30px 40px)
(10px 20px 30px 40px)

>> join((blue,red),(#abc,#def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)

//多个列表连接，需要将多个join()函数合并在一起使用：
>> join((blue red), join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

除此之外，还有很特别的参数$separator，用来指定列表连接之间的分隔符的，默认为auto，还有comma（逗号）和space（空格）！

$separator重要性：请明确指定$separator的值，否则将会有多种情形发生!为避免血案发生，还是明确指定$separator的值吧！

append($list[,$separtator]):

>> append((blue green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue green),red,space)
(#0000ff #008000 #ff0000)
>> append((blue, green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue, green),red,space)
(#0000ff #008000 #ff0000)
>> append(blue,red,comma)
(#0000ff, #ff0000)
>> append(blue,red,space)
(#0000ff #ff0000)

zip($list…): 每个单一的列表个数必须是相同的

zip(1px 2px 3px,solid dashed dotted,green blue red)

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

>> index(1px solid red, 1px)
1
>> index(1px solid red, solid)
2
>> index(1px solid red, red)
3

---

4.Introspection函数: 主要用来对值做一个判断

• type-of($value)：返回一个值的类型;
• unit($number)：返回一个值的单位;
• unitless($number)：判断一个值是否带有单位;
• comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并.

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

总共有number、string、bool、color四种类型!

unit()函数：返回一个值的单位

unit() 函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算：

>> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)//但这种无法合并的单位在css中是没有意义的
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"

注意：但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外，jianren就是矫情！

>> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"
>> unit(10px * 2em - 3cm / 1rem)
SyntaxError: Incompatible units: ‘cm‘ and ‘px*em‘.
>> unit(10px * 2em - 1px / 1rem)
SyntaxError: Incompatible units: ‘‘ and ‘em‘.
>> unit(1px - 1em)
SyntaxError: Incompatible units: ‘em‘ and ‘px‘.
>> unit(1px - 1rem)
SyntaxError: Incompatible units: ‘rem‘ and ‘px‘.
>> unit(1px - 1%)
SyntaxError: Incompatible units: ‘%‘ and ‘px‘.
>> unit(1cm + 1em)
SyntaxError: Incompatible units: ‘em‘ and ‘cm‘.

unitless($number)函数：只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false。

>> unitless(100)
true
>> unitless(100px)
False

用例：用户在调用混合宏时，如果用户没有给参数值加上单位，程序会自动加入单位

//用例：用户在调用混合宏时，如果用户没有给参数值加上单位，程序会自动加入单位
@mixin adjust-location($x, $y) {
  @if unitless($x) {    
    $x: 1px * $x;
  }
  @if unitless($y) {    
    $y: 1px * $y;
  }
  position: relative; 
  left: $x; 
  top: $y;
}

.botton{
    @include adjust-location(20px, 30);
}

comparable($number-1,$number-2): 主要是用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false：

>>comparable(2px,1px)
true
>> comparable(2px,1%)
False

---

5.Miscellaneous函数：

Miscellaneous 函数称为三元条件函数，他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

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

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

---

6.Maps的函数

6-1Maps的用途：管理变量

Sass 的 map 常常被称为数据地图，也有人称其为数组，以 key:value 成对的出现，更像是一个 JSON 数据。

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

注意：用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号。

//以前常用方法定义变量：
$default-color: #fff !default;
$primary-color: #22ae39 !default;

//现在可以更好的管理变量：（可以随意添加变量）
$color: (
    default: #fff,
    primary: #22ae39
);

还可让 map 嵌套 map。其实就是 map 的某一个 key 当成 map，里面可以继续放一对或者多对 key:value：

$map: (
    key1: value1,
    key2: (
        key-1: value-1,
        key-2: value-2,
    ),
    key3: value3
);

使用场景：在换皮肤的项目，可能每一套皮肤对应的颜色蛮多的，那么使用此功能来管理颜色的变量就非常的有条理性，便于维护与管理。

$theme-color: (
    default: (
        bgcolor: #fff,
        text-color: #444,
        link-color: #39f
    ),
    primary:(
        bgcolor: #000,
        text-color:#fff,
        link-color: #93f
    ),
    negative: (
        bgcolor: #f36,
        text-color: #fefefe,
        link-color: #d4e
    )
);

6-2Maps的七大函数：

• 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。

6-2-1.map-get($map,$key): 依给定的 key 值，返回 map 中相关的value 值。如果 $key 不存在 $map中，将返回 null 值。

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}

如果 $key 不在 $map 中，不会编译出 CSS，在 Sass 中，map-get($social- colors,weibo) 返回了一个 null 值。
没有编译出样式，也没有任何错误或者警告信息，体验不强，也不好排错。其实如果我们自定义一个函数，另外加个判断，那就截然不同，看下面函数！

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

当 $map 中有这个 $key，则函数返回 true，否则返回 false。可使用 map-has-key($map,$key) 函数就可以改变map-get($map,$key)不编译也不报错的状态。

@if map-has-key($social-colors,facebook){
    .btn-facebook {
        color: map-get($social-colors,facebook);
    }
} @else {
    @warn "No color found for faceboo in $social-colors map. Property ommitted."
}

//但为提高效率，不每次都编写相同的代码，可定义函数实现：
@function colors($color){
    @if not map-has-key($social-colors,$color){
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($social-colors,$color);
}
.btn-dribble {
    color: colors(dribble);
}
.btn-facebook {
    color: colors(facebook);
}
//对于上面的实现，也可加行@each来实现：
@each $social-network,$social-color in $social-colors {
    .btn-#{$social-network} {
        color: colors($social-network);
    }
}

6-2-3.map-keys($map):返回$map中的所有key,结果为一个列表。

@function colors($color){
    $names: map-keys($social-colors);
    @if not index($names,$color){
        @warn "Waring: `#{$color} is not a valid color name.`";
    }
    @return map-get($social-colors,$color);
}
.btn-weibo{
    color: colors(weibo);
}

//也可以使用@each或@for遍历所有值

@each $name in map-keys($social-colors){
    .btn-#{$name}{
        color: colors($name);
    }
}
@for $i from 1 through length(map-keys($social-colors)){
    .btn-#{nth(map-keys($social-colors),$i)} {
        color: colors(nth(map-keys($social-colors),$i));
    }
}

6-2-4.map-values($map):返回所有的value值，也是一个列表

6-2-5.map-merge($map1,$map2):将两个map合并，得到新的map。

$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6
);

$newmap: map-merge($color,$typo);

注意：若$map1和$map2中有相同的$key,$map2中的$key将会取代$map1中的。

6-2-6map-remove($map,$key):

用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。若$map中不存在要删除的$key，则返回的新map和之前的map一样。

$map:map-remove($social-colors,dribble);

6-2-7 keywords($args…)

动态创建map 的函数。可通过混合宏或函数的参数创建map。参数需成堆出现。

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

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

---

7.颜色函数：

三大方向：RGB、HSL、Opacity三大函数！和其他的颜色函数！

rgb($red,$green,$blue)：
rgba($red,$green,$blue,$alpha)：
red($color)：
green($color)：
blue($color)：
mix($color-1,$color-2,[$weight])：

    hsl($hue,$saturation,$lightness)
    hsla($hue,$saturation,$lightness,$alpha)
    hue($color)
    saturation($color)
    lightness($color)
    adjust-hue($color,$degrees)
    lighten($color,$amount)
    darken($color,$amount)
    saturate($color,$amount)
    desaturate($color,$amount)
    grayscale($color)
    complement($color)
    invert($color)

      alpha($color) /opacity($color)
      rgba($color, $alpha)
      opacify($color, $amount) / fade-in($color, $amount)
      transparentize($color, $amount) / fade-out($color, $amount)

实战：(-?-;)我只知道可以用它制作七色卡之类的东西，望赐教！

---

总结：罗列了sass繁杂的函数功能:字符串、数字函数、列表函数、Introspection函数（判断值）、Miscelloneous(三元条件函数)、Maps函数、颜色函数等七个大块！可谓是左宜右有啊！(形容多才多艺,什么都能做)(●’?’●)人丑就该多读书！