CSS 笔记（十三）：预处理器 —— Sass

CSS 笔记（十三）：预处理器 —— Sass

什么是 Sass

Sass （Syntactically Awesome Stylesheets Sass）是一个使用 Ruby 实现的最早最成熟的 CSS 预处理器，诞生于 2007 年，扩展了 CSS 语言，增加了变量、Mixin（混合）、嵌套、函数和运算等特性，使 CSS 更易于维护和扩展

扩展名

Sass 文件以 .sass 或 .scss 后缀结尾，区别在于：以 .sass 结尾的 Sass 文件使用缩进代替 {} 表示层级结构，语句之后不写分号、以 .scss 结尾的 Sass 文件使用 {} 表示层级结构，语句之后写分号

当使用考拉编译 sass 文件时，项目目录结构中（包含文件名）不能使用中文和特殊字符

使用 Sass

1. 编写 .scss 文件
2. 使用考拉编译 Sass 文件
3. 引入编译之后的 .css 文件

注释

类似于 JavaScript，Sass 也有单行注释与多行注释

// 单行注释

/*
    多行注释
*/

必须注意的是，将 .scss 文件编译为 .css 文件时，单行注释并不参与编译，因此在 .css 文件中不存在 .less 文件中的单行注释

变量

类似于 JavaScript，Sass 也有变量，其特性与 ES6 之前使用 var 相似，示例如下：

$w: 200px;  // 初始化
$h: $w; // 赋值
$bc: pink;

.box {
    $bc: blue;  // 作用域
    width: $w;
    height: $h;
    background-color: $bc;  // 蓝
}

.reyn {
    width: $w;
    height: $h;
    background-color: $bc;  // 粉
}

$bc: red;   // 延迟加载、报错

在上述示例中，展示的特性如下：

1. 作用域
2. 赋值
3. 初始化
4. 覆盖

与 Less 不同的是，在 Sass 中不能使用延迟加载的特性

插值

除了可以将属性值赋予变量之外，也可以将选择器与属性名称赋予变量，不过，必须以插值的形式使用，示例如下：