sass什么是Sass Sass（Syntactically Awesome Stylesheets）是一种 CSS 预

什么是Sass

Sass（Syntactically Awesome Stylesheets）是一种 CSS 预处理器，是 CSS 的超集。
它允许你用更强大、更灵活的语法来写样式，写出来的代码会被编译成标准的 CSS。
目标是让样式开发更高效、模块化、易维护。

Sass 有两种语法

语法名称	特点	文件后缀
SCSS	兼容所有 CSS 语法，写法像 CSS，主流用法	`.scss`
Sass (缩进语法)	不用大括号和分号，靠缩进，语法更简洁但不太普及	`.sass`

为什么用Sass

变量：可以定义颜色、字体大小等变量，方便统一管理。
嵌套：支持嵌套写法，结构更清晰。
Mixins（混合宏） ：定义复用代码块，避免重复。
继承：可以继承已有样式，减少冗余。
运算：支持数学计算，如颜色变亮、宽度计算。
模块化：可以拆分成多个文件，用 @use 或 @import 组合，维护方便。

Sass的核心特性举例

// 变量
$main-color: #3498db;
$padding: 10px;

// 嵌套
.nav {
  ul {
    margin: 0;
    padding: $padding;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    color: $main-color;
    text-decoration: none;

    &:hover {
      color: darken($main-color, 10%);
    }
  }
}

// Mixin
@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include center-flex;
  height: 100vh;
}

// 继承
%button-base {
  padding: 10px 20px;
  border-radius: 5px;
}

.btn-primary {
  @extend %button-base;
  background-color: $main-color;
  color: white;
}

方面	Sass 优势	普通 CSS
变量支持	支持变量，方便统一管理	只能用 CSS 变量，但兼容性差异大
代码复用	有 mixins 和继承	只能用 class 复用，灵活性差
结构层次	支持嵌套，结构清晰	必须写扁平的选择器，代码较乱
计算能力	支持数学和颜色运算	CSS 只能做有限的计算
模块化	支持文件拆分和组合	需要手动合并多个 CSS 文件

什么是Mixin

Mixin 是 Sass 提供的一种“代码块复用”机制。
它就像函数一样，定义一段样式代码，可以在多个地方调用，避免重复写同样的代码。
可以带参数，灵活控制样式输出。

为什么要用 Mixin？

在 CSS 里，如果多个地方样式类似或相同，你只能复制粘贴，维护难。
用 Mixin 只写一份代码，多个地方调用，修改时只需改一个地方，方便维护。
可以用参数定制不同的样式，代码更灵活。

Mixin 的写法和用法

// 定义一个简单的 mixin
@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 使用 mixin
.box {
  @include center-flex;
  height: 100px;
  width: 100px;
  background: blue;
}

定义了一个名叫 center-flex 的样式块；
在 .box 里调用它，得到一段让内容居中的 Flex 布局样式。

Sass命名规范

当文件为局部样式文件时，会在文件名前加一个下划线_表示这是一个**“局部样式文件”**（partial file），不会被编译成单独的 CSS 文件。### _reset.scss 的作用

_reset.scss 是一个 partial（部分模块）；
Sass 在处理 @import 或 @use 时，会自动寻找带下划线的文件；
这样可以被其他样式引入，但 不会被单独输出成 CSS 文件。

_reset.scss 的作用

_reset.scss 是一个 partial（部分模块）；
Sass 在处理 @import 或 @use 时，会自动寻找带下划线的文件；
这样可以被其他样式引入，但 不会被单独输出成 CSS 文件。

这是为了避免你写了很多碎片样式时，每个都生成一个 .css，那样没必要，而且会污染输出目录。