SASS详解：从零到一，轻松驾驭CSS预处理器

        Sass（Syntactically Awesome Stylesheets）是一个流行的CSS预处理器，它扩展了CSS的功能，使得开发者可以更高效地编写样式表。本文将带你从Sass的基础语法开始，逐步深入，帮助你轻松掌握这一强大的工具。

1. 变量（Variables）

在Sass中，变量以$符号开头，可以存储任何值，如颜色、字体大小等。

生活中的例子：
想象一下你正在烘焙，需要记录不同食材的份量。变量就像是你的食谱，让你可以轻松地调整和重用这些值。

代码示例：

$primary-color: #333;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

2. 嵌套规则（Nesting Rules）

Sass允许你在一个规则内部定义另一个规则，从而模拟HTML的层级结构。

生活中的例子：
想象你在整理房间，你会把相关的物品放在一起。嵌套规则就像是你的收纳盒，让你可以轻松地组织你的样式。

代码示例：

nav {
  ul {
    list-style-type: none;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        color: blue;

        &:hover {
          text-decoration: under