CSS预处理器Sass的使用与优势

# 1. 章节一：Sass简介

Sass 是一种 CSS 预处理器，旨在帮助开发者更高效地编写可维护的样式表。在本章节中，我们将介绍 Sass 的基本概念以及它与普通 CSS 的区别。
## 章节二：Sass的基本语法

### 章节三：Sass的高级功能

在这一章节中，我们将深入了解Sass的高级功能，包括继承、运算、函数和控制指令。这些功能将帮助你更加灵活和高效地组织和编写CSS样式。

#### 3.1 继承

Sass提供了继承的功能，可以让你在样式表中创建样式规则之间的关联。使用`@extend`指令可以实现多个选择器之间的样式继承。

// 定义基础样式
.base-style {
  color: black;
  font-size: 14px;
}

// 继承基础样式
.extended-style {
  @extend .base-style;
  font-weight: bold;
}

在上面的例子中，`.extended-style`继承了`.base-style`的样式，生成的CSS将会包含继承后的样式规则。

#### 3.2 运算

Sass支持数学运算，可以在样式表中进行简单的加减乘除运算。这在定义宽度、高度等样式属性时非常有用。

.container {
  width: 100%;
  margin-left: 10px + 20px;
  padding: 10px * 2;
}

在上述例子中，Sass会将运算结果编译为CSS，`.container`的`margin-left`会被计算为30px，`padding`会被计算为20px。

#### 3.3 函数

Sass提供了一些内置函数和用户自定义函数，可以用于处理颜色、字符串等数据类型，以及生成复杂的样式属性值。

// 使用内置函数调整颜色亮度
.adjust-color {
  color: lighten(#ff0000, 20%);
  background: darken(#00ff00, 10%);
}

// 自定义函数
@function get-grid-width($n) {
  @return 30px * $n;
}
.grid-item {
  width: get-grid-width(3);
}

在上面的例子中，我们演示了如何使用Sass的内置函数和自定义函数来操作颜色和计算宽度值。

#### 3.4 控制指令

Sass提供了`@if`、`@for`、`@each`、`@while`等控制指令，可以让你在样式表中实现条件判断和循环操作，从而更加灵活地生成样式规则。

// 使用@for生成一系列颜色规则
@for $i from 1 through 3 {
  .color-#{$i}