CSS 预处理器之 SCSS#

概述#

前端目前要做的事情是越来越多了，实际上有一部分工作是和业务逻辑无关的

• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
• 代码转换：将 TypeScript/ES 6 编译成 JavaScript、将 SCSS 编译成 CSS 等。
• 代码优化：为 CSS 代码添加兼容性前缀等。

这些工作虽然和业务逻辑无关，但是你又不得不做。既然这些工作都要做，那么谁来做这些事情？

这里我们会通过一些工具来完成这些事情，但是这里又遇到一个问题，往往上面的这些事情需要好几个工作来完成。这里就会存在一种情况：需要先将项目拖入到工具 A 进行处理，拖入到工具 B 进行处理、C、D、E...

上面的步骤显得非常的麻烦，我们期望有那么一个工具能够帮助我们把上面的事情按照一定的顺序自动化的完成，这个工具就是我们前端构建工具。

总的来讲，“构建工具”里面“构建”二字是一个重点，这个工具究竟构建了一个啥？

将我们开发环境下的项目代码构建为能够部署上线的代码。

通过构建工具，我们就可以省去繁杂的步骤，直接一条指令就能将开发环境的项目构建为生产环境的项目代码，之后要做的就是部署上线即可。

目前前端领域有非常的多的构建工具，整体来讲可以分为三代：

• 第一代构建工具：以 grunt、gulp 为代表的构建工具
• 第二代构建工具：以 webpack 为代表的构建工具
• 第三代构建工具：以 Vite 为代表的构建工具

1. 模块化

模块化是将 CSS 代码分解成独立的、可重用的模块，从而提高代码的可维护性和可读性。通常，每个模块都关注一个特定的功能或组件的样式。这有助于减少样式之间的依赖和冲突，也使得找到和修改相关样式变得更容易。模块化的实现可以通过原生的 CSS 文件拆分，或使用预处理器（如 Sass）的功能（例如 @import 和 @use）来实现。

2. 命名规范

为 CSS 类名和选择器定义一致的命名规范有助于提高代码的可读性和可维护性。

以下是一些常见的命名规范：

BEM（Block, Element, Modifier）：BEM 是一种命名规范，将类名分为三个部分：块（Block）、元素（Element）和修饰符（Modifier）。这种方法有助于表示组件之间的层级关系和状态变化。例如，navigation__link--active。

OOCSS（面向对象的 CSS）：OOCSS 旨在将可重用的样式划分为独立的“对象”，从而提高代码的可维护性和可扩展性。这种方法强调将结构（如布局）与皮肤（如颜色和字体样式）分离。这样可以让你更容易地复用和组合样式，创建更灵活的 UI 组件。

1<button class="btn btn--primary">Primary Button</button>
2<button class="btn btn--secondary">Secondary Button</button>

1/* 结构样式 */
2.btn {
3  display: inline-block;
4  padding: 10px 20px;
5  border: none;
6  cursor: pointer;
7  font-size: 16px;
8}
9
10/* 皮肤样式 */
11.btn--primary {
12  background-color: blue;
13  color: white;
14}
15
16.btn--secondary {
17  background-color: gray;
18  color: white;
19}

SMACSS（可扩展和模块化的 CSS 架构）：是一种 CSS 编写方法，旨在提高 CSS 代码的可维护性、可扩展性和灵活性。SMACSS 将样式分为五个基本类别：Base、Layout、Module、State 和 Theme。这有助于组织 CSS 代码并使其易于理解和修改。

• Base：包含全局样式和元素默认样式，例如：浏览器重置、全局字体设置等。
• Layout：描述页面布局的大致结构，例如：页面分区、网格系统等。
• Module：表示可重用的 UI 组件，例如：按钮、卡片、表单等。
• State：表示 UI 组件的状态，例如：激活、禁用、隐藏等。通常，状态类会与其他类一起使用以修改其显示。
• Theme：表示 UI 组件的视觉样式，例如：颜色、字体等。通常，主题类用于支持多个主题或在不同上下文中使用相同的组件。

3. 预处理器

CSS 预处理器（如 Sass、Less 和 Stylus）是一种编程式的 CSS 语言，可以在开发过程中提供更高级的功能，如变量、嵌套、函数和混合等。预处理器将这些扩展语法编译为普通的 CSS 代码，以便浏览器能够解析。

4. 后处理器

CSS 后处理器（如 PostCSS）可以在生成的 CSS 代码上执行各种操作，如添加浏览器前缀、优化规则和转换现代 CSS 功能以兼容旧浏览器等。它通常与构建工具（例如 Webpack）一起使用，以自动化这些任务。

5. 代码优化

代码优化旨在减少 CSS 文件的大小、删除无用代码和提高性能。一些常见的优化工具包括：

• CSSO：CSSO 是一个 CSS 优化工具，可以压缩代码、删除冗余规则和合并相似的声明。

• PurgeCSS：PurgeCSS 是一个用于删除无用 CSS 规则的工具。它通过分析项目的 HTML、JS 和模板文件来检测实际使用的样式，并删除未使用的样式。

• clean-css：clean-css 是一个高效的 CSS 压缩工具，可以删除空格、注释和重复的规则等，以减小文件大小。

6. 构建工具和自动化

构建工具（如 Webpack、Gulp 或 Grunt）可以帮助您自动化开发过程中的任务，如编译预处理器代码、合并和压缩 CSS 文件、优化图片等。这可以提高开发效率，确保项目的一致性，并简化部署流程。这些工具通常可以通过插件和配置来定制，以满足项目的特定需求。

7. 响应式设计和移动优先

响应式设计是一种使网站在不同设备和屏幕尺寸上都能保持良好显示效果的方法。这通常通过使用媒体查询、弹性布局（如 Flexbox 和 CSS Grid）和其他技术实现。移动优先策略是从最小屏幕尺寸（如手机）开始设计样式，然后逐步增强以适应更大的屏幕尺寸（如平板和桌面）。这种方法有助于保持代码的简洁性，并确保网站在移动设备上的性能优先。

8. 设计系统和组件库

设计系统是一套规范，为开发人员和设计师提供统一的样式指南（如颜色、排版、间距等）、组件库和最佳实践。这有助于提高项目的一致性、可维护性和协作效率。组件库通常包含一系列预定义的可复用组件（如按钮、输入框、卡片等），可以快速集成到项目中。一些流行的组件库和 UI 框架包括 Bootstrap、Foundation 和 Material-UI 等。

因此整个 CSS 都是逐渐在向工程化靠近的，上面所罗列的那么几点都是 CSS 在工程化方面的一些体现。

CSS 预处理器#

预处理器基本介绍#

平时在工作的时候，经常会面临这样的情况：需要书写很多的样式代码，特别是面对比较大的项目的时候，代码量会急剧提升，普通的 CSS 书写方式不方便维护以及扩展还有复用。

通过 CSS 预处理技术就可以解决上述的问题。基于预处理技术的语言，我们可以称之为 CSS 预处理语言，该语言会为你提供一套增强语法，我们在书写 CSS 的时候就使用增强语法来书写，书写完毕后通过预处理技术编译为普通的 CSS 语言即可。

CSS 预处理器的出现，解决了如下的问题：

• 代码组织：通过嵌套、模块化和文件引入等功能，使 CSS 代码结构更加清晰，便于管理和维护。
• 变量和函数：支持自定义变量和函数，增强代码的可重用性和一致性。
• 代码简洁：通过简洁的语法结构和内置函数，减少代码冗余，提高开发效率。
• 易于扩展：可以通过插件系统扩展预处理器的功能，方便地添加新特性。

目前前端领域常见的 CSS 预处理器有三个：

• Sass
• Less
• Stylus

下面我们对这三个 CSS 预处理器做一个简单的介绍。

Sass

Sass 是最早出现的 CSS 预处理器，出现的时间为 2006 年，该预处理器有两种语法格式：

• 缩进式语法（2006 年）

1$primary-color: #4CAF50
2
3.container
4	background-color: $primary-color
5	padding: 20px
6
7  .title
8    font-size: 24px
9    color: white

• 类 CSS 语法（2009 年）

1$primary-color: #4caf50;
2
3.container {
4  background-color: $primary-color;
5  padding: 20px;
6
7  .title {
8    font-size: 24px;
9    color: white;
10  }
11}

Sass 提供了很多丰富的功能，例如有声明变量、嵌套、混合、继承、函数等，另外 Sass 还有强大的社区支持以及丰富的插件资源，因此 Sass 比较适合大型项目以及团队协作。

• Less：Less 也是一个比较流行的 CSS 预处理器，该预处理器是在 2009 年出现的，该预处理器借鉴了 Sass 的长处，并在此基础上兼容 CSS 语法，让开发者开发起来更加的得心应手

1@primary-color: #4caf50;
2
3.container {
4  background-color: @primary-color;
5  padding: 20px;
6
7  .title {
8    font-size: 24px;
9    color: white;
10  }
11}

早期的 Sass 一开始只有缩进式语法，所以 Less 的出现降低了开发者的学习成本，因为 Less 兼容原生 CSS 语法，相较于 Sass，Less 学习曲线平滑、语法简单，但是编程功能相比 Sass 要弱一些，并且插件和社区也没有 Sass 那么强大，Less 的出现反而让 Sass 出现了第二版语法（类 CSS 语法）

• Stylus：Stylus 是一种灵活且强大的 CSS 预处理器，其语法非常简洁，具有很高的自定义性。Stylus 支持多种语法风格，包括缩进式和类 CSS 语法。Stylus 提供了丰富的功能，如变量、嵌套、混合、条件语句、循环等。相较于 Sass 和 Less，Stylus 的社区规模较小，但仍有不少开发者喜欢其简洁灵活的特点。

1primary-color = #4CAF50
2
3.container
4  background-color primary-color
5  padding 20px
6
7  .title
8    font-size 24px
9    color white

Sass 快速入门#

Sass 最早是由 Hampton Catlin 于 2006 年开发的，并且于 2007 年首次发布。

在最初的时候， Sass 采用的是缩进敏感语法，文件的扩展名为 .sass，编写完毕之后，需要通过基于 ruby 的 ruby sass 的编译器编译为普通的 CSS。因此在最早期的时候，如果你想要使用 sass，你是需要安装 Ruby 环境。

为什么早期选择了采用 Ruby 呢？这和当时的 Web 开发大环境有关系，在 2006 - 2010 左右，当时 Web 服务器端开发就特别流行使用基于 Ruby 的 Web 框架 Ruby on Rails。像早期的 github、Twitter 一开始都是使用的 ruby。

到了 2009 年的时候， Less 的出现给 Sass 带来竞争压力，因为 Less 是基于原生 CSS 语法进行扩展，使用者没有什么学习压力，于是 Natalie Weizenbaum 和 Chris Eppstein 为 Sass 引入了新的类 CSS 语法，也是基于原生的 CSS 进行语法扩展，文件的后缀名为 scss。虽然文件的后缀以及语法更新了，但是功能上面仍然支持之前 sass 所支持的所有功能，加上 sass 本身插件以及社区就比 less 强大，因此 Sass 重新变为了主流。

接下来还需要说一下关于编译器。随着社区的发展和技术的进步，Sass 已经不在局限于 Ruby，目前已经有多种语言实现了 Sass 的编译器：

• Dart Sass：由 Sass 官方团队维护，使用 Dart 语言编写。它是目前推荐的 Sass 编译器，因为它是最新的、功能最全的实现。

  GitHub 仓库：https://github.com/sass/dart-sass

• LibSass：使用 C/C++ 编写的 Sass 编译器，它的性能优于 Ruby 版本。LibSass 有多个绑定，例如 Node Sass（ Node.js 绑定）和 SassC（C 绑定）。

  GitHub 仓库：https://github.com/sass/libsass

• Ruby Sass：最早的 Ruby 实现，已被官方废弃，并建议迁移到 Dart Sass。

官方推荐使用 Dart Sass 来作为 Sass 的编译器，并且在 npm 上面发布了 Dart Sass 的包，直接通过 npm 安装即可。

接下来我们来看一个 Sass 的快速上手示例，首先创建一个新的项目目录 sass-demo，使用 pnpm init 进行项目初始化，之后安装 sass 依赖：

1pnpm add sass -D

接下来在 src/index.scss 里面写入如下的 scss 代码：

1$primary-color: #4caf50;
2
3.container {
4  background-color: $primary-color;
5  padding: 20px;
6
7  .title {
8    font-size: 24px;
9    color: white;
10  }
11}

接下来我们就会遇到第一个问题，编译。

这里我们就可以使用 sass 提供的 compile 方法进行编译。在 src 目录下面创建一个 index.js 文件，记入如下的代码：

1// 读取 scss 文件
2// 调用 sass 依赖提供的 complie 进行文件的编译
3// 最终在 dist 目录下面新生成一个 index.css（编译后的文件）
4
5const sass = require("sass"); // 做 scss 文件编译的
6const path = require("path"); // 处理路径相关的
7const fs = require("fs"); // 处理文件读写相关的
8
9// 定义一下输入和输出的文件路径
10const scssPath = path.resolve("src", "index.scss");
11const cssDir = "dist"; // 之后编译的 index.css 要存储的目录名
12const cssPath = path.resolve(cssDir, "index.css");
13
14// 编译
15const result = sass.compile(scssPath);
16console.log(result.css);
17
18// 将编译后的字符串写入到文件里面
19if (!fs.existsSync(cssDir)) {
20  // 说明不存在，那就创建
21  fs.mkdirSync(cssDir);
22}
23
24fs.writeFileSync(cssPath, result.css);

上面的方式，每次需要手动的运行 index.js 来进行编译，而且还需要手动的指定要编译的文件是哪一个，比较麻烦。早期的时候出现了一个专门做 sass 编译的 GUI 工具，叫做考拉，对应的官网地址为：http://koala-app.com/

现在随着 Vscode 这个集大成的 IDE 的出现，可以直接安装 Sass 相关的插件来做编译操作，例如 scss-to-css

注意在一开始安装的时候，该插件进行 scss 转换时会压缩 CSS 代码，这个是可以进行配置的。

Sass 基础语法#

注释#

CSS 里面的注释 /* */ ，Sass 中支持 // 来进行注释，// 类型的注释再编译后是会消失

1/*
2  Hello
3*/
4
5// World

1/*
2  Hello
3*/

如果是压缩输出模式，那么注释也会被去掉，这个时候可以在多行注释的第一个字符书写一个 ! ，此时即便是在压缩模式，这条注释也会被保留，通常用于添加版权信息

1/*!
2  该 CSS 作者 XXX
3  创建于 xxxx年xx月xx日
4*/
5
6.test {
7  width: 300px;
8}

1/*!
2  该 CSS 作者 XXX
3  创建于 xxxx年xx月xx日
4*/
5.test {
6  width: 300px;
7}

变量#

这是当初 Sass 推出时一个极大的亮点，支持变量的声明，声明方式很简单，通过 $ 开头来进行声明，赋值方法和 CSS 属性的写法是一致的。

1// 声明变量
2$width: 1600px;
3$pen-size: 3em;
4
5div {
6  width: $width;
7  font-size: $pen-size;
8}

1div {
2  width: 1600px;
3  font-size: 3em;
4}

变量的声明时支持块级作用域的，如果是在一个嵌套规则内部定义的变量，那么就只能在嵌套规则内部使用（局部变量），如果不是在嵌套规则内定义的变量那就是全局变量。

1// 声明变量
2$width: 1600px;
3
4div {
5  $width: 800px;
6  $color: red;
7
8  p.one {
9    width: $width; /* 800px */
10    color: $color; /* red */
11  }
12}
13
14p.two {
15  width: $width; /* 1600px */
16  color: $color; /* 报错，因为 $color 是一个局部变量 */
17}

可以通过一个 !global 将一个局部变量转换为全局变量

1// 声明变量
2$width: 1600px;
3
4div {
5  $width: 800px;
6  $color: red !global;
7
8  p.one {
9    width: $width;
10    color: $color;
11  }
12}
13
14p.two {
15  width: $width;
16  color: $color;
17}

1div p.one {
2  width: 800px;
3  color: red;
4}
5
6p.two {
7  width: 1600px;
8  color: red;
9}

数据类型#

因为 CSS 预处理器就是针对 CSS 这一块融入编程语言的特性进去，所以自然会有数据类型。

在 Sass 中支持 7 种数据类型：

• 数值类型：1、2、13、10px
• 字符串类型：有引号字符串和无引号字符串 "foo"、'bar'、baz
• 布尔类型：true、false
• 空值：null
• 数组（list）：用空格或者逗号来进行分隔，1px 10px 15px 5px、1px,10px,15px,5px
• 字典（map）：用一个小括号扩起来，里面是一对一对的键值对 (key1:value1, key2:value2)
• 颜色类型：blue、#04a012、rgba(0,0,12,0.5)

数值类型#

Sass 里面支持两种数值类型：带单位数值 和 不带单位的数值，数字可以是正负数以及浮点数

1$my-age: 19;
2$your-age: 19.5;
3$height: 120px;

字符串类型#

支持两种：有引号字符串 和 无引号字符串

并且引号可以是单引号也可以是双引号

1$name: "Tom Bob";
2$container: "top bottom";
3$what: heart;
4
5div {
6  background-image: url($what + ".png");
7}

1div {
2  background-image: url(heart.png);
3}

布尔类型#

该类型就两个值：true 和 false，可以进行逻辑运算，支持 and、or、not 来做逻辑运算

1$a: 1>0 and 0>5; // false
2$b: "a" == a; // true
3$c: false; // false
4$d: not $c; // true

空值类型#

就一个值：null 表示为空的意思

1$value: null;

因为是空值，因此不能够使用它和其他类型进行算数运算

数组类型#

数组有两种表示方式：通过空格来间隔 以及 通过逗号来间隔

例如：

1$list0: 1px 2px 5px 6px;
2$list1: 1px 2px, 5px 6px;
3$list2: (1px 2px) (5px 6px);

关于数组，有如下的注意事项：

1. 数组里面可以包含子数组，例如 1px 2px, 5px 6px 就是包含了两个数组，1px 2px 是一个数组，5px 6px 又是一个数组，如果内外数组的分隔方式相同，例如都是采用空格来分隔，这个时候可以使用一个小括号来分隔 (1px 2px) (5px 6px)
2. 添加了小括号的内容最终被编译为 CSS 的时候，是会被去除掉小括号的，例如 (1px 2px) (5px 6px) ---> 1px 2px 5px 6px

1$list0: 1px 2px 5px 6px;
2$list1: 1px 2px, 5px 6px;
3$list2: (1px 2px) (5px 6px);
4
5div {
6  padding: $list2;
7}

1div {
2  padding: 1px 2px 5px 6px;
3}

3. 小括号如果为空，则表示是一个空数组，空数组是不可以直接编译为 CSS 的

1$list2: ();
2
3div {
4  padding: $list2; // 报错
5}

但是如果是数组里面包含空数组或者 null 空值，编译能够成功，空数组以及空值会被去除掉

1$list2: 1px 2px null 3px;
2$list3: 1px 2px () 3px;
3
4div {
5  padding: $list2;
6}
7
8.div2 {
9  padding: $list3;
10}

4. 可以使用 nth 函数去访问数组里面的值，注意数组的下标是从 1 开始的。

1// 创建一个 List
2$font-sizes: 12px 14px 16px 18px 24px;
3
4// 通过索引访问 List 中的值
5$base-font-size: nth($font-sizes, 3);
6
7// 使用 List 中的值为元素设置样式
8body {
9  font-size: $base-font-size;
10}

1body {
2  font-size: 16px;
3}

最后我们来看一个实际开发中用到数组的典型案例：

1$sizes: 40px 50px 60px;
2
3@each $s in $sizes {
4  .icon-#{$s} {
5    font-size: $s;
6    width: $s;
7    height: $s;
8  }
9}

1.icon-40px {
2  font-size: 40px;
3  width: 40px;
4  height: 40px;
5}
6
7.icon-50px {
8  font-size: 50px;
9  width: 50px;
10  height: 50px;
11}
12
13.icon-60px {
14  font-size: 60px;
15  width: 60px;
16  height: 60px;
17}

字典类型#

字典类型必须要使用小括号扩起来，小括号里面是一对一对的键值对

1$a: (
2  $key1: value1,
3  $key2: value2,
4);

可以通过 map-get 方法来获取字典值

1// 创建一个 Map
2$colors: (
3  "primary": #4caf50,
4  "secondary": #ff9800,
5  "accent": #2196f3,
6);
7
8$primary: map-get($colors, "primary");
9
10button {
11  background-color: $primary;
12}

1button {
2  background-color: #4caf50;
3}

接下来还是看一个实际开发中的示例：

1$icons: (
2  "eye": "\f112",
3  "start": "\f12e",
4  "stop": "\f12f",
5);
6
7@each $key, $value in $icons {
8  .icon-#{$key}:before {
9    display: inline-block;
10    font-family: "Open Sans";
11    content: $value;
12  }
13}

1.icon-eye:before {
2  display: inline-block;
3  font-family: "Open Sans";
4  content: "\f112";
5}
6
7.icon-start:before {
8  display: inline-block;
9  font-family: "Open Sans";
10  content: "\f12e";
11}
12
13.icon-stop:before {
14  display: inline-block;
15  font-family: "Open Sans";
16  content: "\f12f";
17}

颜色类型#

支持原生 CSS 中各种颜色的表示方式，十六进制、RGB、RGBA、HSL、HSLA、颜色英语单词。

Sass 还提供了内置的 Colors 相关的各种函数，可以方便我们对颜色进行一个颜色值的调整和操作。

• lighten 和 darken：调整颜色的亮度，lighten 是增加亮度、darken 是减少亮度

1$color: red;
2
3.div1 {
4  width: 200px;
5  height: 200px;
6  background-color: lighten($color, 10%); // 亮度增加10%
7}
8
9.div2 {
10  width: 200px;
11  height: 200px;
12  background-color: darken($color, 10%); // 亮度减少10%
13}

1.div1 {
2  width: 200px;
3  height: 200px;
4  background-color: #ff3333;
5}
6
7.div2 {
8  width: 200px;
9  height: 200px;
10  background-color: #cc0000;
11}

• saturate 和 desaturate：调整颜色的饱和度

1$color: #4caf50;
2
3.div1 {
4  width: 200px;
5  height: 200px;
6  background-color: saturate($color, 10%); // 饱和度增加10%
7}
8
9.div2 {
10  width: 200px;
11  height: 200px;
12  background-color: desaturate($color, 10%); // 饱和度减少10%
13}

• Adjust Hue：通过调整颜色的色相来创建新颜色。

1$color: #4caf50;
2$new-hue: adjust-hue($color, 30); // 色相增加 30 度

• RGBA：为颜色添加透明度。

1$color: #4caf50;
2$transparent: rgba($color, 0.5); // 添加 50% 透明度

• Mix：混合两种颜色。

1$color1: #4caf50;
2$color2: #2196f3;
3$mixed: mix($color1, $color2, 50%); // 混合两种颜色，权重 50%

• Complementary：获取颜色的补充颜色。

1$color: #4caf50;
2$complementary: adjust-hue($color, 180); // 色相增加 180 度，获取补充颜色

如果想要查阅具体有哪些颜色相关的函数，可以参阅官方文档：https://sass-lang.com/documentation/modules/color

嵌套语法#

插值语法#

运算#

关于运算相关的一些函数：

• calc
• max 和 min
• clamp

calc#

该方法是 CSS3 提供的一个方法，用于做属性值的计算。

1.container {
2  width: 80%;
3  padding: 0 20px;
4
5  .element {
6    width: calc(100% - 40px);
7  }
8
9  .element2 {
10    width: calc(100px - 40px);
11  }
12}

1.container {
2  width: 80%;
3  padding: 0 20px;
4}
5.container .element {
6  width: calc(100% - 40px);
7}
8.container .element2 {
9  width: 60px;
10}

注意，在上面的编译当中，如果单位相同，Sass 在做编译的时候会直接运行 calc 运算表达式，得到计算出来的最终值，但是如果单位不相同，会保留 calc 运算表达式。

min 和 max#

min 是在一组数据里面找出最小值，max 就是在一组数据里面找到最大值。

1$width1: 500px;
2$width2: 600px;
3
4.element {
5  width: min($width1, $width2);
6}

1.element {
2  width: 500px;
3}

clamp#

这个也是 CSS3 提供的函数，语法为：

1clamp(min, value, max)

min 代表下限，max 代表上限，value 是需要限制的值。clamp 的作用就是将 value 限制在 min 和 max 之间，如果 value 小于了 min 那么就取 min 作为值，如果 vlaue 大于了 max，那么就取 max 作为值。如果 value 在 min 和 max 之间，那么就返回 value 值本身。

1$min-font-size: 16px;
2$max-font-size: 24px;
3
4body {
5  font-size: clamp($min-font-size, 1.25vw + 1rem, $max-font-size);
6}

1body {
2  font-size: clamp(16px, 1.25vw + 1rem, 24px);
3}

在上面的 CSS 代码中，我们希望通过视口宽度动态的调整 body 的字体大小。value 部分为 1.25vw + 1rem（这个计算会在浏览器环境中进行计算）。当视口宽度较小时，1.25vw + 1rem 计算结果可能是小于 16px，那么此时就取 16px。当视口宽度较大时，1.25vw + 1rem 计算结果可能大于 24px，那么此时就取 24px。如果 1.25vw + 1rem 计算值在 16px - 24px 之间，那么就取计算值结果。

Sass 控制指令#

前面我们说了 CSS 预处理器最大的特点就是将编程语言的特性融入到了 CSS 里面，因此既然 CSS 预处理器里面都有变量、数据类型，自然而然也会有流程控制。

三元运算符#

三元运算符#

1if(expression, value1, value2)

示例如下：

1p {
2  color: if(1+1==2, green, yellow);
3}
4
5div {
6  color: if(1+1==3, green, yellow);
7}

1p {
2  color: green;
3}
4
5div {
6  color: yellow;
7}

@if 分支#

这个表示是分支。分支又分为三种：

• 单分支
• 双分支
• 多分支

单分支#

1p {
2  @if 1+1 == 2 {
3    color: red;
4  }
5  margin: 10px;
6}
7
8div {
9  @if 1+1 == 3 {
10    color: red;
11  }
12  margin: 10px;
13}

1p {
2  color: red;
3  margin: 10px;
4}
5
6div {
7  margin: 10px;
8}

双分支#

仍然使用的是 @else

1p {
2  @if 1+1 == 2 {
3    color: red;
4  } @else {
5    color: blue;
6  }
7  margin: 10px;
8}
9
10div {
11  @if 1+1 == 3 {
12    color: red;
13  } @else {
14    color: blue;
15  }
16  margin: 10px;
17}

1p {
2  color: red;
3  margin: 10px;
4}
5
6div {
7  color: blue;
8  margin: 10px;
9}

多分支#

使用 @else if 来写多分支

1$type: monster;
2p {
3  @if $type == ocean {
4    color: blue;
5  } @else if $type == matador {
6    color: red;
7  } @else if $type == monster {
8    color: green;
9  } @else {
10    color: black;
11  }
12}

1p {
2  color: green;
3}

@for 循环#

语法如下：

1@for $var
2  from <start>
3  through <end>
4  #会包含
5  end 结束值
6  // 或者
7  @for
8  $var
9  from <start>
10  to
11  <end>
12  #to
13  不会包含
14  end 结束值
15;

1@for $i from 1 to 3 {
2  .item-#{$i} {
3    width: $i * 2em;
4  }
5}
6
7@for $i from 1 through 3 {
8  .item2-#{$i} {
9    width: $i * 2em;
10  }
11}

1.item-1 {
2  width: 2em;
3}
4
5.item-2 {
6  width: 4em;
7}
8
9.item2-1 {
10  width: 2em;
11}
12
13.item2-2 {
14  width: 4em;
15}
16
17.item2-3 {
18  width: 6em;
19}

@while 循环#

语法如下：

1@while expression ;

1$i: 6;
2@while $i > 0 {
3  .item-#{$i} {
4    width: 2em * $i;
5  }
6  $i: $i - 2;
7}

1.item-6 {
2  width: 12em;
3}
4
5.item-4 {
6  width: 8em;
7}
8
9.item-2 {
10  width: 4em;
11}

注意，一定要要在 while 里面书写改变变量的表达式，否则就会形成一个死循环。

@each 循环#

这个优有点类似于 JS 里面的 for...of 循环，会把数组或者字典类型的每一项值挨着挨着取出来

1@each $var in $vars ;

$var 可以是任意的变量名，但是 $vars 只能是 list 或者 maps

下面是一个遍历列表（数组）

1$arr: puma, sea-slug, egret, salamander;
2
3@each $animal in $arr {
4  .#{$animal}-icon {
5    background-image: url("/images/#{$animal}.png");
6  }
7}

1.puma-icon {
2  background-image: url("/images/puma.png");
3}
4
5.sea-slug-icon {
6  background-image: url("/images/sea-slug.png");
7}
8
9.egret-icon {
10  background-image: url("/images/egret.png");
11}
12
13.salamander-icon {
14  background-image: url("/images/salamander.png");
15}

下面是一个遍历字典类型的示例：

1$dict: (
2  h1: 2em,
3  h2: 1.5em,
4  h3: 1.2em,
5  h4: 1em,
6);
7
8@each $header, $size in $dict {
9  #{$header} {
10    font-size: $size;
11  }
12}

1h1 {
2  font-size: 2em;
3}
4
5h2 {
6  font-size: 1.5em;
7}
8
9h3 {
10  font-size: 1.2em;
11}
12
13h4 {
14  font-size: 1em;
15}

Sass 混合指令#

在 Sass 里面存在一种叫做混合指令的东西，它最大的特点就是允许我们创建可以重用的代码片段，从而避免了代码的重复，提供代码的可维护性。

混合指令基本的使用#

首先要使用混合指令，我们需要先定义一个混合指令：

1@mixin name {
2  // 样式。。。。
3}

例如：

1// 创建了一个指令
2@mixin large-text {
3  font: {
4    family: "Open Sans", sans-serif;
5    size: 20px;
6    weight: bold;
7  }
8  color: #ff0000;
9}

接下来是如何使用指令，需要使用到 @include，后面跟上混合指令的名称即可。

1// 创建了一个指令
2@mixin large-text {
3  font: {
4    family: "Open Sans", sans-serif;
5    size: 20px;
6    weight: bold;
7  }
8  color: #ff0000;
9}
10
11p {
12  @include large-text;
13  padding: 20px;
14}
15
16div {
17  width: 200px;
18  height: 200px;
19  background-color: #fff;
20  @include large-text;
21}

1p {
2  font-family: "Open Sans", sans-serif;
3  font-size: 20px;
4  font-weight: bold;
5  color: #ff0000;
6  padding: 20px;
7}
8
9div {
10  width: 200px;
11  height: 200px;
12  background-color: #fff;
13  font-family: "Open Sans", sans-serif;
14  font-size: 20px;
15  font-weight: bold;
16  color: #ff0000;
17}