关于预处理器 sass 的超全用法

随着用户需求的增加，应用于页面的 css 代码越来越复杂越发臃肿难以维护，但是又没有 css 的替代品，css 预处理器作为 css 的扩展，出现在前端技术中。

sass 是 css 预处理器中常用的一种，它是一种动态样式语言，比 css 多些功能，如变量、嵌套、运算、混入、继承、指令、颜色处理、函数等。

sass 的工作方式是，在 sass源文件中写代码，再由 sass 编译器/转译器 将其转换为最终浏览器所能认识的 css 文件。我们也常定义 scss后缀名的文件，其实是 sass 语法进行了改良，就变成了 scss。

我们可以通过以下方式来使用 sass。

vscode 插件 live sass compiler 结合 vscode 的配置，可实时监听 sass 文件的变化
使用 sass 工具，监听 sass 文件变化，编译 sass 文件成 css文件
nodejs 项目中，我们通常会配置 sass-loader来对 sass 文件进行处理，sass-loader 也依赖于 sass 工具

以下是 sass 的具体语法。

注释

在 css 中注释格式为块注释 /* */，sass 中拓展了行注释 // 的方式，两者的区别在于，块注释 /* */ 通过编译后仍保留在 css 文件中，而行注释 // 不会保留。

在这里插入图片描述

（最后一行代码是 live sass compiler 插件生成的 sourceMappingURL指向sourceMap文件，包含编译后代码与源代码的映射关系）

选择器

sass 在兼容 css 的基础上，为选择器增加了一些新用法。

选择器嵌套：选择器以父元素、子元素的方式进行嵌套
父选择器：通过 & 符连接父选择器
属性嵌套：相同属性前缀可以进行嵌套
占位符选择器：与选择器一起使用，通过 @extend 继承

在这里插入图片描述

变量

css 代码中我们也会见到变量的形式，在选择器中以 --开头定义变量名，通过 var使用变量。这种方式在 sass 中也可以使用，sass 编译器不会对其进行转换。

在这里插入图片描述

sass 中定义变量遵循如下规则，和 js 类似。

变量以美元符号（$）开头，后面跟变量名
变量名不以数字开头，可包含字母、数字、下划线、横线（连接符）
变量值支持数字、字符串、颜色、布尔值、空值、数组
写法同css，即变量名和值之间用冒号分隔
变量要先定义，后使用

sass 中变量还有如下属性

选择器内部定义的是局部变量，仅在选择器中可用
在最外层定义为全局变量，所有选择器中都可以使用，选择器中定义的变量通过 !global 也可将其变成全局变量
变量默认值使用 !default，如果该变量未被定义，就使用当前定义的默认值，反之使用已定义的值

在这里插入图片描述

导入@import

通过 @import 加载 css 资源到当前的 sass 文件中（sass 引入方式，scss后缀可省略）

@import 'public.scss';

以下几种方式会被当作普通 css 语句

文件拓展名是 css
文件名以 http:// 开头
文件名是 url()

在这里插入图片描述

混入@mixin

混入可以将一些搭配使用的 css 定义为一个组，只需声明一次，可在文件中多次引用，有助于减少重复代码，并且还可以通过参数功能引入变量，输出多样化样式。

通过 @mixin定义，@include使用
可传参数及设置默认值
当参数数量不确定时，通过 ...来展开

在这里插入图片描述

继承

在网页设计的时候会存在这样的情况，一个元素与另一个元素样式基本一致，只添加了个别额外样式，我们可能会在 HTML 中定义两个样式，一个通用，一个特殊。为避免编写相同样式的重复代码，可以使用 继承 @extend来解决。

使用 % 定义的占位符选择器，不会被编译
通过 @extends + 选择器名称来达到继承的效果

在这里插入图片描述

混入和继承所能达到的效果比较相似，主要区别在于：继承是并集选择器，通过逗号连接，而混入主要是将代码包含到原有选择器，代码量更多。

运算符

sass 中提供了一些运算符在css表达式中计算、判断。

等号运算符 == !==
关系运算符（操作整数）> < >= <=
逻辑运算符 and or not
数字操作符 纯数字、百分号、css部分单位（px、pt、in...）
① + 号：只有一个单位时，数字部分相加保留该单位，存在两个相同单位时，单位不变直接相加，两个单位不相同时，如果可以进行转换则转换（比如px与pt相加会转换成px），不能转换（如%和px无法互相转换）则编译报错
② - 号：运算规则同+号
③ * 号：只能出现0或1个单位，不可以出现两个单位，否则编译会报错（如50% * 10%，10px * 10px）
④ / 号：被视为除法运算符号的三种情况（如果值或值的一部分，是变量或者函数的返回值，如果值被圆括号包裹，如果值是算数表达式的一部分），其余情况会被当做css分隔符, 0/1/2个相同的单位都可以
⑤ % 号：取模，规则同+号
字符串运算符 ""
引号在左，运算结果则有引号，相反，运算结果没有引号。

在这里插入图片描述

插值语法

插值语法 #{}用来特定的区域插入表达式或者变量，由此可以实现内容动态变换的效果，可用于选择器、属性名、属性值、注释。

这里直接通过变量来定义，中间的斜杠会被认为是除号会进行除法运算，使用插值语法，则可以保留分隔符。

在这里插入图片描述

常见函数

sass 中内置了一些函数供直接调用

color（颜色函数）
darken：颜色变暗，lighten($color, $amount) 颜色变亮， $amount 取值在0% - 100%之间
String（字符串函数）
quote：给内容加字符串，str-length：取长度
Math（数值函数处理数值计算）
percentage()将无单元的数值转换为百分比， round()将数字四含五入为最接近的整数，min()和max()获取几个数字中的最小值或最大值，random()返回一个随机数
List（List函数操作List）
length()返回列表长度，nth()返回列表中的特定项，join()将两个列表连接在一起， append()在列表末尾添加一个值
Map函数（Map函数操作Map）
map-get() 根据键值获取map中的对应值，map-merge()来将两个map合并成个新的map, map-values() 映射中的所有值
selector选择器函数
可对CSS选择进行些相应的操作，例如: selector-append(可以把个选择符附加到另一个选择符， selector-unify() 将两组选择器合成一个复合选择器
自检函数
例如: feature-exists()检查当前Sass版本是否存在某个特性，vaniable-exists()检查当前作用域中是否存在某个变量，mixin-exists()检查某个mixin是否存在。

在这里插入图片描述

流程控制指令@if

@if() 函数允许根据条件进行分支，并仅返回两种可能结果中的一种，可单独使用，也可配合混入、继承等其它语法。语法方式同 js 的 if…else if…else。

在这里插入图片描述

流程控制指令@for

@for 指令类似 js 中的 for 循环，可以在限制的范围内重复输出格式。

指令包含两种格式：@for $var from <start> through <end>和
@for $var from <start> to <end>

当使用 through时，条件范围包含与的值，而使用 to时条件范围只包含的值不包含的值。另外，$var可以是任何变量，比如 $i，<start>和<send>必须是整数值。

在这里插入图片描述

流程控制指令@each

@each 指令类似 js 中的 for each，遍历数组并输出格式。

指令格式：$var in <list>, $var可以是任何变量名，比如$length或者$name, 而<list>是连串的值，也就是值列表。

在这里插入图片描述

流程控制指令@while

@while 指令类似 js 中的 while 循环，可重输出格式直到表达式返回结果为false。

在这里插入图片描述

自定义函数 @function

和 js 中的函数类似，在 sass 中将比较复杂或者常用的内容进行封装，可以重复使用。

函数的定义 @function function-name([$paraml, $param2....]){ @return $value; }

函数名 function-name 与 function_name 相同
@return 它只允许在函数体中使用，并且每个@function必须以@return结束。当遇到@return时，它会立即结束函数并返回其结果。
函数入参可以设置默认值，也可以按参数名传值，或者通过 ...表示任意参数

在这里插入图片描述

函数 @function 实现的某些功能混入@mixin 也能实现，但函数更侧重于做一些计算。

三元条件函数if

和 js 中的三元运算符相似，语法：if($condition, $if-true, $if-false);判断 $condition，如果条件成立，则返回 $if-true的结果，如果条件不成立，则返回 $if-false的结果。

在这里插入图片描述

@use 加载模块

@use 是对 @import 的增强，从其它 sass 样式表加载 mixin、function 和变量，并将来自多个样式表的 css 组合在一起，加载的样式表被称为“模块”。

它有这样一些语法：

加载模块通过 @use+ 文件名 ，如 @use 'common'
文件名即默认的模块名称，修改模块名称使用 as 关键字，如 @use 'common' as c
@use 模块内变量可通过 !default 定义默认值，引入时可通用 with (...) 的方式修改，如 @use 'common' with ($font-size: 16px)
不希望被加载/导出的私有成员，通过下划线定义，如 $_font-size: 14px;

在这里插入图片描述

@forward 转发

通过 @forward加载一个模块的成员，并将这些成员当作自己的成员对外暴露出去，类似于 es6 的 export。

它有这样一些语法：

转发通过 @forward '+ 文件名，如：@forward 'common'
选择性转发，通过 hide 隐藏元素，show 显示元素，如
@forward 'common' show $font-size;
@forward 'global' hide bgColor;
当转发多个文件存在相同变量名时，需使用 as 定义前缀，如：
@forward 'global' as g-* hide g-bgColor
@forward 模块内变量可通过 !default 定义默认值，引入时可通用 with (...) 的方式修改，如 @forward 'global' as g-* hide g-bgColor with($font-size: 30px);
需要转发的模块需要在当前文件使用，仍需通过 @use 引入