我的 Sass 学习笔记

注释

有两种注释方式:

  1. 类似 CSS 的注释方式,使用 /* 开头,*/ 结束。
  2. 类似 JavaScript 的注释方式,使用 //

两者的区别在于,第一种注释会在编译生成的 .css 文件中保存下来,第二种则不会。

插值 #{}

使用插值有几个注意的地方,不能利用插值构造属性值,比如下面的代码

意思就是对于 key: value 形式的 CSS 表达式,可以使用插值构造 key,不可以使用插值构造 value

还有一点就是不能在 @include 命令后面使用插值,比如下面的代码

不过有一点值得高兴的是,在 @extend 命令中可以使用插值。

% 占位符

编译成 CSS 的代码如下:

这个时候连 .base 这个类也会存在,有的时候我们并不需要这个类,所以我们可以用 % 占位符来解决这个问题。

生成的 CSS 代码如下所示:

这个时候需要注意的一点是,.base 改写成了 %base,而不是 %.base

Sass变量——字符串类型

Sass 支持两种字符串类型,一种是有引号字符串,一种是无引号字符串。在正常情况下使用,Sass 不会改变其类型,即编译成 .css 文件的时候,有引号的字符串还是有引号的字符串,无引号的还是无引号。

不过有一种例外情况,就是在使用插值的时候,Sass 会将有引号的字符串转换成无引号的字符串。

Sass 运算

Sass 在做加减乘除运算的时候,不能将两个不同单位的值相加,否则会报错,比如以下代码在编译的时候就会报错。

Sass 在做乘法运算的时候,一个单位不能赋予两个值,也就是不管多少个变量相乘,只要有一个变量带单位就可以了,如下。

由于 / 在纯 CSS 中就被当做一种符号使用,所以在 Sass 中,只有出现以下情况,才会将 / 做除法运算符。

  1. 数值被圆括号包围 (width / 2)
  2. 如果数值是数学表达式的一部分 10px / 2 + 50px
  3. 如果数值的任意部分是存储一个变量中的或者是函数的返回值 $width / 2

还有一点值得一提,那就是如果两个带相同单位的变量相除,到最后得到的是一个不带单位的值。(1000px / 500px) 得到的值为 2

Sass 中可以利用 + 进行字符串拼接 $content: "Hello" + "Sass!"。不过在拼接的时候有一个规律,那就是在 + 左侧的字符串类型决定了结果的字符串类型。如果一个有引号的字符串 + 无引号的字符串结果是有引号的字符串,如果一个没有引号的 + 有引号的字符串结果是没有引号的字符串。

@for 循环

使用 for 循环有两种方式

这二者的区别是:

  • 使用 through 关键词的时候,循环的范围是 [start, end]

  • 使用 to 关键词的时候,循环的范围是 [start, end)

字符串函数

Sass 字符串函数主要有以下两个函数:

  • unquote($string):删除字符串中的引号(只能删除最前和最后的引号,字符串中间的引号则无法删除)
  • quote($string):给字符串添加引号(如果字符串本身带有单引号,则将单引号统一换成双引号,而且如果要添加引号的字符串中包含单引号和空格的情况,需要在最外层加上单引号或者双引号,否则会报错。如果字符串中包含特殊符号,如!, <,?等则需要在字符串外部用双引号包含,否则会报错)

其它函数:

  • to-lower-case($string): 将字符串中所有字符转换成小写。
  • to-upper-case($string):将字符串中的所有字符转换成大写。

数字函数

Sass 中存在不少处理数字的函数,这些函数的功能也比较常见,下面依次介绍:

  • percentage():用于将一个不带单位的数字转换成百分比形式(percentage(100px / 500px) 的结果为 20%)

  • round():其功能就是将一个数四舍五入为一个最接近的整数,该函数强大的一个地方就是可以接受任何单位的数字。(round(10.1px) 结果为 10pxround(2.6em) 结果为 3em

  • ceil():其功能是向上取整。(ceil(2.1px) 结果为 3pxceil(2.6em) 的结果为 3em)

  • floor():其功能是向下取整。

  • abs():其功能是获得一个数的绝对值(abs(-10px) 的结果是 10pxabs(-0.5%) 的结果是0.5%)

  • min() / max():用于在多个数中找出最小/最大的那一个数,不过数值列表中不可以出现两个不同单位的数值。(min(1%, 2, 3 , 400%) 的结果为 1%, max(1px, 5, 8, 10px, 20)的结果为 20,纯数字不带单位所以上述数值列表中只出现了一个单位,那就是 px

  • random():用于生成一个随机数,数值的范围是 [0, 1)

列表函数

  • length():用于计算一个列表里面有多少个值,且列表中的值以空格分隔,不能以逗号分隔。length(10px 20px 30px) 的结果为 3

  • nth($list, $n):用来指定列表中的某个值。nth(10px 20px 30px, 2) 的结果为 20px

  • join() :用于将两个列表合并成一个列表。如果要合并多个列表,可以组合使用 join()join() 中海油一个 $separator 参数,用于设置列表中的分隔符,有三个可选值,分别是 auto, commaspace。如果没有设置这个值,那么默认是 auto,它的规则就是如果要合并的第一个列表使用空格分隔,那么合并的结果就用空格分隔,如果第一个列表使用逗号分隔,那么合并的结果就用逗号分隔。有一种特殊情况就是如果第一个列表中只存在一个值,那么将会以第二个列表为准。join(10px 20px, (30px, 40px)) 的结果为 (10px 20px 30px 40px)

  • append():用于在列表末尾添加值。 append() 中也有一个 $separator 参数,它可以用来设置当值插入列表后整个列表以何种分隔符分隔。它的取值有 auto, space, comma 三种。默认为 auto,它的规则是如果插入值之前列表中只有一个数值,那么插入后以空格分隔,如果插入前有超过一个以上的数值,那么将继续采用原有的分隔符。

  • zip(): 用于将多个列表值合并成一个多维的列表。zip(1px 2px 3px, solid dashed dotted, green red blue) 的结果为 ((1px solid green), (2px dashed red), (3px dotted blue))

  • index():用于找到某个值在列表中的位置,如果列表中存在该值,那么会返回它所在的位置,如果不存在则返回 falseindex(1px solid red, 1px) 结果为 1index(2px dotted green, 3px) 的结果为 false

  • type-of(): 用于检测值的类型,有以下四种类型 number, string, bool, color

  • unit():用于获取一个值所使用的单位,比如 unit(10px) 得到的结果是 px,而且 unit() 能够得到两个数相乘或者相除后的单位,比如说 unit(100px * 2em) 得到的结果是 px*em,但是值得注意的是两个不同单位的值相加或者相减就会报与发错与。而且就算我们得到了诸如 px*em 这种值也是没有任何意义的。

  • unitless():用于检测一个值是否带单位,如果带单位则返回 false,不带单位则返回 true

  • comparable() 用于判断两个两个值是否可以加减或者合并,上面已经提到了两个带着不同单位的数值是不可以相加减的,所以当两个值不能相加减时,这个函数的返回结果是 false, 反之返回 true

Miscellaneous函数

该函数和三元表达式功能相似,如下所示

这段代码的返回结果是 400px。所以很明显,第一个参数是判断条件,当判断条件为真,则返回第二个参数,否则返回第三个参数。

Maps

Sass 中的 mapjson 的形式很像,用来集中存储数据,以键值对的形式存放。加入我们针对不同的主题有不同的颜色,那么利用 map 我们可以这么写。

map 中自带了 7 个用于管理数据的函数。

  • map-get($map, $key):用于获取 map 中对应于 key 的键值。

    如果 map-get($map, $key)$key 这个键根本就不存在,那么这个函数会返回 nullsass 编译成 css 的时候也会将属性值为 null 的样式语句忽略。

  • map-has-key($maps, $key):用于判断一个 $key 是否存在,上面提到,如果利用 map-get() 函数访问一个不存在的 key,会返回 null,这样 css 语句也会莫名其妙的丢失掉,为了解决这种迷惑,可以在使用 map-get() 之前先使用 map-has-key() 提前检测。

    不过上述的代码只能使用一次,所以可以写一个通用性的函数来做检测工作。

  • map-keys($map):返回 $map 中的所有 key。比如上面 $colors 如果应用这个方法,则返回结果为 default, primary, error(一个以逗号分隔的列表)。

  • map-values($map):返回 $maps 中的所有 value。比如上面 $colors 如果应用这个方法,则返回结果为 "#333", green, red(一个以逗号分隔的列表)。

  • map-merage($map1, $map2):将两个 $map 合并成一个 $map,不过在合并前需要注意两个 $map 中没有相同的 $key 值,如果存在相同的 $key,则 $map2 会覆盖 $map1

  • map-remove($map, $key):将 $map 中的 $key 去除并且返回一个新的 $map

颜色函数

  • rgb($red, $green, $blue):通过指定三大基色的值创建出一个 16 进制形式的颜色值。比如 rgb(200, 40, 88) 的结果为 #c82858

  • rgba(): 有两种用法,分别是 rgba($red, $green, $blue, $alpha)rgba($color, $alpha)。其实第一种用法和原生的 CSS 并没有什么不同,厉害的是第二种用法,以往我们需要将一个诸如 #302589 的十六进制的颜色转换成 rgb 形式才可以使用 rgba(),不过在 sass 中我们就不需要再转换,而是可以直接使用 rgba(#302589, .6) 的形式。CSS3 也已经实现了这种用法,不过目前还存在浏览器兼容问题。

  • red($color)/green($color)/blue($color):这三个函数用于提取 $color 中的 red/green/blue 颜色的值。比如 red(#f33) 的值为 255(15 * 16 + 15)。

  • mix($color1, $color2, $weight):用于混合两种颜色,$weight 指定的是混合的权重,范围在 0-1 之间,默认为 0.5。mix($color1, $color2, .25) 则第一种颜色值占比重 25%,第二种颜色值占比重 75%。计算的时候透明度也会加入计算范畴,比如 mix(rgba($red, $green, $blue, .5), $color2) 的出来的结果的透明度 0.75。计算方式如下:第一种颜色的透明度为 0.5,第二种颜色的透明度为 1(其实我们常说的透明度实际上是不透明度),所以 (0.5 + 1)*weight = 0.75

HSL 函数

  • lighten()darken() 这两个函数都是围绕 HSL 中的 L(亮度)来对颜色进行调整的,参数范围在 [0, 1] 之间,不过最常用的值是 3% ~ 20%。用法也很简单,如 lighten(#ad141e, 10%) / darken(#ad141e, 10%)

    众所周知,亮度的范围无非就是在 [0, 1] 之间,要么是全黑要么是全白,如果利用上面的两个函数将一个颜色中的亮度值设置的超出了[0, 1] 这个范围,那么得出的颜色要么是全黑(<= 0),要么是全白(>=1)。

    利用 lightness($color) 这个函数可以得出一个颜色的亮度值,另外当颜色的亮度发生变化时会引起色调和饱和度的轻微变化,利用 hue($color) 可以提取一个颜色的色调,利用 saturation($color) 可以提取一个颜色的饱和度。

  • saturate()desaturate() 这两个函数是围绕 HSL 中的 S(饱和度)来对颜色进行调整的,参数范围也是在 [0, 1] 之间,利用这两个参数如果让一个颜色的饱和度大于 1,那么将会取 1 为计算结果,如果饱和度小于 0,那么将会取 0 为计算结果。使用方法如 saturate($color, 30%) / desaturate($color, 30%)

    利用 grayscale() 可以将一个颜色的饱和度设置为 0,其作用和 desaturate($color, 100%) 相同,饱和度为 0 的颜色特征就是呈现为灰色,只不过不同的颜色灰色程度不同罢了。

  • adjust-hue() 用于调节 HSL 中的 H(色调),不过不同于以上两种值,调整色调只有这一个方法就足够了,因为它可以设置负值。

    色调的范围在 -360deg ~ 360deg 之间,也可以设置 -360% ~ 360%,效果是一样的。

    还有一个很有意思的事情,就是如果一个颜色值的 hue 超过了 360deg,那么将会从 0deg 重新计算,比如得到一个颜色值的色调为 380deg,那么它的值实际上将等于 380deg - 360deg,也就是 20deg。与此相同,当一个颜色的色调小于 -360deg 时,就会从 -0deg 重新计算,比如一个颜色值的色调为 -380deg,那么它的值实际上为 -380deg - (-360deg),所以得到的值为 -20deg

Opacity 函数介绍

  • alpha($color)opacity($color) 这两个函数的用途相同,都是用来获取颜色的透明度的。比如 alpha(rgba(orange, .8))opacity(rgba(orange, .8)) 获得的结果都是 0.8

    其实说到底,alphaopacity 衡量的都是不透明度,0 代表完全透明, 1 代表完全不透明,另外值得一提的是,在 CSSopacityrgba 是有区别的,详情可以看 RGBA与Opacity区别小解

  • opacify()fade-in() 这两个函数会将颜色变得更加不透明,比如 opacify(rgba(red, 0.6), 0.1)fade-in(rgba(red, 0.6), 0.1) 得到的结果都是 rgba(255, 0, 0, 0.7)

    不过当颜色的颜色的透明度最大值就是 1,大于 1 的会被当成 1 来计算。也就是说 opacify(red, 0.8) 得到的结果是 #ff0000,而不会得到一个 rgba(255, 0, 0, 1.8)

  • transparentize()fade-out() 这两个函数的作用是将颜色变得更加透明。颜色透明值的最小值为 0,如果小于 0 的会被当成 0

Sass 的 @ 规则

@import 指令能够引入其他的 Sass 文件,并将它们编译在一个 CSS 文件中,这与原生的 @import 相比,减少了 http 请求。我们可以将一些变量提取出来,整理成单独的 Sass 文件,便于管理。不过在以下四种情况中,@import 将会被编译成 CSS@import规则。

  1. 文件的拓展名是 .css
  2. 文件名以 http 开头
  3. 文件名是 url()
  4. @import 中包含了任何媒体查询的规则。

如果你在引入一个 sass 文件的时候,不想这个文件也被编译成一个单独 css 文件,那么可以在文件名前面添加下划线。比如 _color.scss 或者 _color.sass 在被其他文件引入的时候,就不会编译出 color.css 文件。虽然文件名前面添加了下划线,在引入的时候不需要加下划线(@import "color)。


@media 的功能和其在原生 CSS 中一样,不过在 Sass 中它更加灵活,比如下面的代码

编译成 CSS 代码就是

好处在哪里?在于将一个元素的所有样式都写在自己的作用域内,便于阅读和修改。


@include@extend 在前面可以找到解释。


@at-root 可以将选择器跳出根元素。比如说下面的代码。

编译成 CSS 如下所示

那么这个指令的作用是什么呢?可以用来设置 keyframes,比如下面的代码。

编译成 CSS 如下


@debug, @warn, @error 都可以用于在 Sass 编译成 CSS 的时候打印信息,只不过信息的等级不同,可以在调试的时候使用,可以快速定位代码在哪一步出现了问题。


不断学习,不断更新。。。

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注