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

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的基础上帮助咱们作好咱们常常会遇到的一些样式设计模式的。