Sass小结

1、嵌套

1、选择器嵌套

2、属性嵌套

比如font-family，font-size，font-weight都以font作为属性的命名空间

2、父选择器&

也可以使用&进行选择器名称拼接

3、注释

编译成css文件后：

/* …*/ 中的注释会保留

//中的注释不会保留

 

4、变量

1、原生css变量：

--变量名:变量值定义，var(--变量名)进行使用

2、scss变量

以美元符号$开头

3、注意

1. 变量以美元符号$开头，后面跟变量名；
2. 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；
3. 通过连接符-与下划线_定义的同名变量为同一变量；
4. 变量一定要先定义，后使用；
5. 写法同css，即变量名和值之间用冒号:分隔；

 

 

5、数据类型

数字，1rem、2vh、13、 10px；

字符串，分有引号字符串与无引号字符串，"foo"、 'bar'、baz；

颜色，blue, #04a3f9, rgba(255,0,0,0.5)；

布尔型，true和false；

空值，null是其类型的唯一值。表示缺少值，通常由函数返回以表示缺少结果；

数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em,Helvetica,Arial,sans-serif；

maps， 相当于 JavaScript 的 object，(key1: value1, key2: value2)；

 

 

6、默认值

可以在变量的结尾添加!default来给变量设置默认值

 

7、运算符

1、相等运算==

2、不相等运算!=

 

3、关系运算符

< > >= <=

 

4、布尔运算符

1、and

2、or

3、not

 

5、数字操作符

+ - * / %

 

6、字符串运算

1、+可用于连接字符串；

2、如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的；

3、无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

 

8、插值语句

#{}

可以在选择器、属性名、注释中使用变量

类似于模板字符串

 

 

9、语句

1、@if

 

2、@for

@for $变量名 from <start> through <end> 包括end

@for $变量名 from <start> to <end>

 

 

3、@each

@each $变量名 in $list（list为值列表）

 

4、@while

循环输出直到表达式返回结果为 false

 

10、导入

1、@import

可以嵌套在选择器中，只是导入的样式只能出现在嵌套的作用域中

 

2、@Partials

当需要导入scss，但不希望编译成css时，在文件名前添加下划线即可

 

注意：

1. 导入语句中不需要添加下划线；
2. 不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

 

 

11、mixin

用于定义可重复使用的样式

1、不传参

 

2、传参

 

3、指定默认值

 

4、可变参数（参数不确定）

 

 

12、函数

 

 

13、继承

@extend 用于继承已存在的样式

1、占位选择符 %

占位选择符所属的样式未使用时，不会被编译到css文件中

 

14、@use

可以将来自多个样式表的css组合在一起

 

15、@forward

@forward语句可以引入另一个模块的所有变量、mixins和函数，将它们直接作为当前模块的API暴露出去，不会真的在当前模块增加代码。

 

1、show/ hide

通过控制 show和 hide，可以决定模块中的哪些成员对引入后的模板可见。

 

16、@at-root

@at-root用来跳出嵌套，在多级嵌套时比较常用。但只能跳出选择器嵌套，不能跳出media或support

 

编译后：

 

@at-root的关键词：

all：表示所有

rule：表示常规css选择器（默认）

media：表示media

support：表示support，主要用于检测浏览器是否支持css的某个属性

 

 

17、scss内置扩展

1、color

lighten（）和darken（）：调亮或调暗颜色

opacify（）：颜色透明度减少

transparent（）：颜色透明度增加

mix（）：混合两种颜色

 

2、string

quote（）：向字符串添加引号

string-length（）：获取字符串长度

string-insert（）：将内容插入字符串给定位置

 

 

3、math

percentage（）：将无单位的数值转换为百分比

round（）：将数字四舍五入为最接近的整数

min（）和max（）：获取几个数字中的最小值或最大值

random（）：返回一个随机数

 

4、list

length（）：返回列表长度

nth（）：返回列表中的特定项

join（）：将两个列表连接在一起

append（）：在列表末尾添加一个值

 

5、map

map-get（）：根据键值获取map中的对应值

map-merge（）：将两个map合并成一个新的map

map-values（）：映射中的所有值

 

6、selector

selector-append()：可以把一个选择符附加到另一个选择符

selector-unify()：将两组选择器合成一个复合选择器

 

7、meta

meta.calc-args（）：获取方法的参数

meta.calc-name（）：获取方法名

 

18、调试相关

1、@debug

打印表达式的值

 

2、@error

显示错误

 

 

3、@warn

显示警告性建议

 

19、自检函数

feature-exists()：检查当前scss版本是否存在某个特性

variable-exists()：检查当前作用域中是否存在某个变量

mixin-exists()：检查某个mixin是否存在