关于预处理器 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表达式中计算、判断。

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

插值语法

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

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

常见函数

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

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

跳出嵌套 @at-root

当同一个css可能会在很多地方用到，并且为了css的顺序与html保持一致时，如logo的样式，或者组件调换位置，就可以不移动css的位置，使用 @at-root 被嵌套的选择器或属性跳出嵌套。

sass 中如变量、函数、混入、导入、转发等功能，使 css 开发更为灵活、强大，增加 css 的可阅读性和维护性，是项目开发的常用选择。

以上就是 预处理器 sass 的用法 的介绍， 更多有关 前端、CSS、JavaScript的内容可以参考我其它的博文，持续更新中~