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

零. 什么是表达式

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

一. 数据类型

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

1. 字符串

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

  • 有引号字符串:可以包含除"外的任何字符

  • 无引号字符串:不能以数字或者特殊字符开头,也不能包含空格以及一些特殊字符,如*或者&等。

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

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

2. 数值

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

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

因为/在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. 命名好的颜色,比如whitegray等。

4. 列表

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

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

5. 布尔值

布尔值主要用于Sass的分支结构中判断使用,布尔值的操作符有andornot,就是与或非。

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

二. 函数——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的基础上帮助我们做好我们经常会遇到的一些样式设计模式的。


StinsonZhao
3.5k 声望102 粉丝

人生苦短,及时coding,保持谦逊,维持恒心