sass笔记-4|像写脚本一样写Sass，把能交给Sass办的都交给它

时间：2022-06-03 16:21:09

Sass笔记关于sass的基础部分已经写完，这一篇介绍Sass的高级特性——脚本特性。Sass能做很多事让样式表更智能，我们先会看到Sass眼中的数据类型，在这些数据类型上会有可进行的操作，此外，Sass中的内置函数（尤其是颜色函数）能帮你自动计算很多东西，sass还有自己一套控制结构语法，能实现循环或者分支，这一切都赋予了sass脚本的特性。

零. 什么是表达式

只要能放在属性右边的都是表达式，常见的，表达式是一个简单的值，但表达式也可以包含数学运算符，表达式可以出现在属性或者变量值中的任何地方。最直白的理解是，表达式是一串东西，这串东西中包含了运算或者函数调用等操作，最终这串东西是有一个值的，这就是表达式。

一. 数据类型

Sass中数据类型有字符串、数值、颜色、列表、布尔值这几种类型，是的，好像和我们编程语言如JS、Java等的数据类型不太一样，尤其是关于颜色。

1. 字符串

Sass的字符串类型分为有引号字符串和无引号字符串：

  • 有引号字符串：可以包含除"外的任何字符
  • 无引号字符串：不能以数字或者特殊字符开头，也不能包含空格以及一些特殊字符，如*或者&等。

Sass还将另外几个特殊构造看成字符串，如!important，url()值，但url($val)不是，因为它含有变量。

最常用的字符串操作符是+——用于拼接字符串，至于拼接的结果是否带引号，由拼接的左边的字符串决定。由于历史原因，-和/也会拼接，但是操作符本身也会被包含在结果字符串中。

2. 数值

在Sass和css中，数值包括两部分：实际的数字以及（可选的）单位，如px、em、%等。当对含有单位的数值做乘除时，单位也遵循科学运算，如：5em * 4px = 20em*px。

数值可以进行+、-、*、/和%运算。

因为/在CSS中也被用来分隔值，所以针对/运算有以下规则：

  • 如果两个值中有任意一个是字符串，结果将是一个普通的正斜杠，也就是变成拼接字符串的操作并且/字符被包含在结果中
  • 以下任一情况满足，都将进行除法运算：
    • 在/的任意一边使用一个变量
    • 整个值被括号包围
    • 该值被用作其他算术表达式的一部分

3. 颜色

颜色值有几种表达方式，这些表达从颜色构成的不同角度进行描述：

  1. 以#开头的十六进制法，一共6位十六进制数表示，每两位十六进制数依次表示Red、Green、Blue这3个通道的成分多少，从00到ff；
  2. 以rgb()或rgba()函数描述的颜色，依次传入R、G、B这3个通道的颜色成分，从0到255，对于rgba()最后还传入一个alpha通道，表示不透明度，0表示完全透明，1表示完全不透明；
  3. 以hsl()或hsla()函数描述的颜色，依次传入色相、饱和度和明度，后者也有一个alpha通道参数；
  4. 命名好的颜色，比如white、gray等。

4. 列表

列表，是一个数据的序列，用空格或者逗号隔开，你可以理解为数组。列表可以包含其他列表（是不是像二维数组、多维数组），常见的是用逗号隔开的列表中加入用空格隔开的列表，比如a b, c d, e f，也可以用括号来嵌套同类型的其他列表。

列表的用处一般有两个，一是它使用@each指令遍历时，代码更简洁；二是可以用它将更加复杂的参数传递给混合器。

5. 布尔值

布尔值主要用于Sass的分支结构中判断使用，布尔值的操作符有and、or和not，就是与或非。

此外比较操作符<、<=、>、>=只能作用于数字，但是==可作用于所有类型，这些操作符返回布尔值。

二. 函数——Sass的一大亮点

Sass的内置函数（尤其是颜色函数）能帮我们计算很多内容，我们也不需要立即掌握每一个函数，只需要明白Sass的函数能帮我们做哪些事，到时查文档即可。

Sass函数，和诸如rgb（）这样的CSS函数类似，被看做Sass表达式的一部分，返回Sass值（即上面讲的几种类型）。调用时，可以用$name: value的形式指定参数，从而可以不按照顺序传入参数。

1. 数值处理常见函数

取整

  • ceil($number): 向上取整
  • round($number): 最接近的整数，四舍五入
  • floor($number): 向下取整

其他可能用到的函数

  • abs($number): 取绝对值
  • comparable($number_1, $number_2): 返回两个值能否比较
  • unit($number)和unitless($number): 前者返回数值单位，后者返回是否有单位

2. 获取颜色信息的函数

颜色函数分为两部分，一部分用于返回颜色的具体信息，另一部分用于将一个旧的颜色转化为一个新的颜色值。

返回颜色信息的函数常用的有：

  • alpha($color)或者opacity($color): 返回$color的alpha通道，也就是不透明度
  • red($color)、green($color)、blue($color): 返回颜色对应的R、G、B通道，所以会返回0-255的值
  • hue($color)、saturation($color)、lightness($color): 返回颜色对应的色相（0-359deg）、饱和度（百分比）和明度（百分比）

3. 转换颜色的函数

最综合的两个颜色转换函数: adjust($color, ...)和scale($color, ...)。

  • adjust($color, ...): 接收一个颜色作为第一个参数，后面的参数是一列描述如何转换的关键字，比如adjust($color, $red: 20, $alpha: -0,5)将$color的红色成分增加20，不透明度减少0.5
  • scale($color, ...): 接收一个颜色作为第一个参数，但是和上面的区别在于，它不接受固定的数值，而是以百分比的方式调节，但是不支持$hue的调节，因为色相是一个环，用百分比调节没有意义

只要任何一个函数中的参数不同时属于RGB和HSL成分，两个函数就能接受任意多个参数进行调节从而转换出新的颜色。

最混的颜色函数：mix($color_1, $color_2, [$weight])。

这个函数将两种颜色混合在一起，可选一个参数$weight越接近100%，使用前一种颜色的成分更多，此外这个函数还受两个颜色的透明度影响，透明度越小的颜色对结果的影响越大。

常用的单因素颜色转换函数：比如lighten()、darken()、saturate()、desaturate()，看这些函数的名字就知道这些函数是用来做什么的了，上面几个函数都接受一个颜色作为第一个参数，然后接受一个百分比用于调节，依次是增加亮度、降低亮度、增加饱和度、降低饱和度。

方便的特殊颜色转换函数：grayscale($color)将饱和度降为0，从而转化为灰度；complement($color)将色度旋转180度，获取原来颜色的补色；invert($color)将颜色反相。

4. 列表函数

  • nth($list, $n): 返回列表中的某一项，从1开始计数
  • join($list1, $list2, [$separator]): 拼接两个列表， 可选的分隔符参数决定最后列表的分割方式（逗号或者空格）
  • length($list): 返回列表中的项目数

5. 其他有用的sass函数

  • type-of($value): 返回一个无符号字符串，代表值的类型
  • if($condition, $if-true, $if-false): 根据第一个参数的布尔值，决定返回第二个还是第三个参数，和我们在其他变成语言中用的?:三目运算符类似

三. 插值

可以在选择器和属性名的任何一个地方将一个表达式包裹在#{和}之间，表达式的结果将会在CSS输出结果中代替#{...}。

比如，我们可以利用插值构建一个混合器

@mixin thing($class, $prop){
    .thing.#{$class} {
        prop-#{$prop}: val;
    }
}

四. 结构控制指令

Sass可以有循环和分支的结构控制指令，和我们在其他编程语言中看到的差不多，只是它有自己的写法，这里仅介绍@for、@each、@if。

1. @for

语法有两种：

  • @for $i from 1 to 5 {...}：这样跳出循环后，i停留在4
  • @for $i through 5 {...}: 这样跳出循环后，i停留在5

2. @each

对列表中的每一项使用样式块：@each $item in you, me, he {...}

3. @if

语法：@if condition {...}，和其他的编程语言一样，可以接任意多个@else if condition {...}块，最后最多还能接一个@else {...}块。

五. 小结

Sass的脚本属性能帮助我们自动化计算和处理很多事情，比如相关数值的计算，你再也不用每次手按计算器计算出一个值然后填到css中，或者再需要修改某个值时，重新计算过所有的新值填上，Sass帮你计算，助你快速修改。

这里面最吸引人的当属Sass的颜色函数，告别了需要在一些色彩工具中选择颜色，然后建立配色，修改选色拷贝颜色值再应用看效果的繁琐过程，甚至当你熟悉了一些颜色理论和色环后，你可以完全在代码编辑器中凭借代码就能转换出你需要的颜色，然后去浏览器看效果仅仅是确认你的配色，Sass基于现有的颜色生成其他颜色配色（比如改一改明度、饱和度等），很容易帮助你生成一套还不错的颜色。

至此，介绍的Sass基本特性和高级脚本特性已经足够应付生产中大部分的工作了，如果还有其他需要，可以尝试去翻阅Sass的文档。当然，如果想要更加“偷懒”，更加方便，那么Sass的框架就可以上场了，接下来我们会聊一下Sass的一个框架——Compass，看它是怎么在Sass的基础上帮助我们做好我们经常会遇到的一些样式设计模式的。

相关文章