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. 颜色
颜色值有几种表达方式,这些表达从颜色构成的不同角度进行描述:
- 以
#
开头的十六进制法,一共6位十六进制数表示,每两位十六进制数依次表示Red、Green、Blue这3个通道的成分多少,从00到ff; - 以
rgb()
或rgba()
函数描述的颜色,依次传入R、G、B这3个通道的颜色成分,从0到255,对于rgba()
最后还传入一个alpha通道,表示不透明度,0表示完全透明,1表示完全不透明; - 以
hsl()
或hsla()
函数描述的颜色,依次传入色相、饱和度和明度,后者也有一个alpha通道参数; - 命名好的颜色,比如
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.5scale($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的基础上帮助我们做好我们经常会遇到的一些样式设计模式的。
原文地址:https://my.oschina.net/u/2366960/blog/801027