Sass介绍

Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它基于CSS语法，提供了一些扩展和特性，使得CSS的编写更加简单、灵活、可维护性更强。Sass的主要特点是变量、嵌套规则、Mixin、函数等。

Sass的主要特点包括：

1. 变量：Sass支持变量，可以定义和使用变量，方便进行代码复用和维护。
2. 嵌套规则：Sass支持嵌套规则，可以使得CSS的编写更加清晰和简洁，减少重复的代码。
3. Mixin：Sass支持Mixin，可以将一组CSS样式集合封装成一个Mixin，方便进行代码复用和维护。
4. 函数：Sass支持函数，可以对CSS样式进行计算和处理，如颜色计算、字符串处理等。
5. 导入：Sass支持导入，可以将多个Sass文件合并成一个文件，方便进行代码管理和维护。
6. 继承：Sass支持继承，可以使用@extend关键字，将一个选择器的样式继承到另一个选择器中，减少重复的代码。

Sass 的语法分为两种：基于缩进的 Sass 语法和 SCSS 语法。基于缩进的 Sass 语法使用缩进来表示嵌套关系，而 SCSS 语法则更类似于 CSS，使用花括号表示嵌套关系。Sass 可以在编译时将 Sass 或 SCSS 文件转换为普通的 CSS 文件，这样可以在浏览器中直接使用。

以下是一个使用Sass进行样式编写的简单示例：

$primary-color: #007bff;

.header {
  background-color: $primary-color;
  color: #fff;
  padding: 10px;

  a {
    color: #fff;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.btn {
  padding: 5px 10px;
  border: 1px solid $primary-color;
  color: $primary-color;

  &:hover {
    background-color: $primary-color;
    color: #fff;
  }
}

上面的代码中，定义了一个名为$primary-color的变量，用于存储主题颜色。在.header选择器中，使用了变量 $primary-color 来设置背景颜色，同时使用了嵌套规则和 & 符号，可以方便地对子元素进行样式设置。在 .btn选择器中，使用了变量 $primary-color 来设置边框颜色和字体颜色，同时使用了&符号来实现伪类样式的设置。