sass的用法

参考文档：

　　Sass英文网：https://sass-lang.com/documentation/　　

　　Sass中文网：https://www.sass.hk/docs/

　　菜鸟教程-saas函数：https://www.runoob.com/sass/sass-functions.html

　　CSS-@规则：https://c.biancheng.net/css3/at-rule.html

 

本文不讲述 sass 的配置，而是总结一下一些 sass 的常用知识点。

 

1. 导入文件

@use/@forward/@import 三者都是导入文件，有何区别 ？

• @import：已被最新版本弃用

• @use
• @forward

 　　注释：参考Sass英文文档的 at-rules部分 和  有关博文。

 

2. 注释

Sass 支持标准的 CSS 的 多行注释 /* */ 与 单行注释 //。 前者（多行注释）会被完整输出到编译后的 CSS 文件中，而后者（单行注释）则不会。

 

3. 嵌套规则

• 选择器嵌套
• 父选择器嵌套（占位符&）
• 属性嵌套

输出结果为： 

 

 

4. SassScript —— 提供了一些脚本运算功能

4.1 数据类型： 包含 数字、字符串、颜色、布尔值、空值、数组、对象 6种

 

　　4.2 变量

• • 　变量以美元符号 $ 开头。
  • 　变量支持块级作用域。

　　　　注释：若将局部变量转换为全局变量，可以添加 !global 声明，如下：

 　　　　注意：一般地，由于变量名在编译前就已经确定，是静态的，所以不能直接在变量名中使用插值变成动态声明。

　　　　　　　但是，可以通过map类型，把动态内容作为全局map的动态属性，然后通过map.get获取目标值。如下

  

4.3 运算

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

  （1）数字运算

SassScript 支持数字的 加减乘除取整等运算 (+, -, *, /, %)，如果有必要，会在不同单位间转换值。

　　　　　　关系运算 <, >, <=, >= 也可用于数字运算。

 

（2）字符串运算

　　　　　　　　　+ 可用于连接字符串

 

　　　　　　　　　注意：如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

 

 

 　　　　　　（3）颜色值运算
　　　　　　　　  

　　　　　　　　 注意：如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

 

　　　　（4）布尔运算

　　　　　　　SassScript 支持布尔型的 and or 以及 not 运算。

 

　　　　（5）数组运算

　　　　　　　数组不支持任何运算方式，只能使用 list functions 控制。

　　　　　　

　　　　（6）插值语句：在选择器 或 属性名中，可以使用 #{} 插值语句，插入动态的值。　　　　

  

　　　　　　　注意：大多数情况下，使用插值语句可能还不如使用变量方便，但是，使用 #{} 可以避免 Sass 运行运算表达式，而是直接编译成CSS。

 

　　　　（7）括号 —— 圆括号可以用来影响运算的顺序

 

　　　　（8）函数 (Functions)

　　　　　　　SassScript 定义了多种函数，如 hsl()、mix() ...... 更多的详见：https://www.runoob.com/sass/sass-functions.html

 

　　　　（9）默认值：!default

　　　　　　　在变量的结尾添加 !default 给一个变量赋值默认值，如果赋值了，则默认值失效，且无关乎赋值顺序。

　　　　　　　注意：变量是 null 空值时，将视为未被 赋值，则取默认值。

 

 

5. @-Rules

　　Sass 支持所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives） 

　　注释：css3的@规则可详见：https://c.biancheng.net/css3/at-rule.html

 

　  5.1 @import - 导入（sass中逐渐被@use替代）

　　　　Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。

　　　　被导入的文件将合并编译到同一个 CSS 文件中，另外，其中的变量或混合指令 (mixin) 都可以在导入的文件中使用。

　　　　示例：@import "foo.scss"; 或 @import "foo";

 

 

　　5.2 @media - 媒体

　　　　与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。

 

　　5.3 @extend - 继承或延伸

　　　　示例：采用seriousError的类之后可以省略再添加 error 类名　　　　

 

 

　　5.4 @at-root - 跳出到最外层（样式层级表根部）

　　　　示例：

 编译结果为：

 　　　　此外，还有 @at-root (without: ...)  和 @at-root (with: ...)，示例如下： 

 

　　5.5 @debug - 调试

　　

 　　此外，调试的指令还有 @warn 和 @error 。

 

 

6. 控制指令

6.1 @if - 条件判断

  

6.2 @for - 遍历

　　　　　　格式一：@for $var from <start> through <end>  　// 范围 [start, end]

　　　　　　格式二：@for $var from <start> to <end>　　　　// 范围 [start, end）

6.3 @each - 遍历

格式：$var in <list> 

复杂一点的如下：

 

 　　6.4 @while - 直到条件为 false 终止

 

 

7. 混合指令（Mixin）

 　　混合指令，用于定义可重复使用的样式。

　　注释：@mixin 可以用  =  表示，而 @include 可以用  +  表示。

 

 　　7.1 定义 —— @mixin

　　　　格式： @mixin <name> {...}

　　　　

 

　　7.2 使用 —— @include

 

 　　　　注意：也可以直接在最外层使用，如下：

 　　　　注释：在混合样式中，也可以包含其他混合样式。

 

 　　7.3 传参 　　　　

　　

 　　　　（1）设定默认值。 　　　　

　　

 　　　　（2）关键词参数：便于阅读，可以打乱顺序使用。

　　　　　　

　　　　（3）不确定参数个数 ...　　　　　　

 

 　　　　（4）内容插槽 @content 　　　　　　

 

 

8. 函数指令

 自定义函数 @function-@return

 注释：自定义函数也可以使用关键词参数。

 

 

 

。。。未完待续