Sass 了解

Sass 入门：CSS 预处理器是什么？怎么使用？

一句话理解：Sass 是 CSS 的增强版，让你可以像写程序一样写 CSS，支持变量、嵌套、模块化、Mixin 等功能。

对于你现在学习的 React + TypeScript 中后台开发，Sass 属于 P1 知识，理解核心语法，能看懂项目中的 .scss 文件就够了。

一、为什么需要 Sass？

假设你开发一个后台管理系统，有很多按钮、卡片需要使用相同的颜色。

普通 CSS：

css 复制代码

.header {
  background: #1677ff;
}

.button {
  background: #1677ff;
}

.sidebar {
  border-color: #1677ff;
}

如果主题颜色要修改，就可能需要改很多地方。

Sass 可以定义变量：

css 复制代码

$primary-color: #1677ff;

.header {
  background: $primary-color;
}

.button {
  background: $primary-color;
}

.sidebar {
  border-color: $primary-color;
}

这样只需要修改一次变量。

当然，现代 CSS 也有原生变量 --primary-color，Sass 的优势不只是变量，而是它还有嵌套、Mixin、模块化等编译期功能。

二、Sass、SCSS、CSS 有什么区别？

对比	CSS	SCSS	Sass 缩进语法
文件后缀	`.css`	`.scss`	`.sass`
支持变量	CSS 自定义属性	`$变量`	`$变量`
支持嵌套	支持现代 CSS 嵌套	支持	支持
大括号 `{}`	使用	使用	不使用
分号 `;`	使用	使用	通常不使用
浏览器直接使用	可以	需要编译	需要编译

实际项目中，.scss 通常比 .sass 更常见，因为它的语法与 CSS 很接近。

例如：

普通 CSS

css 复制代码

.card {
  padding: 20px;
}

.card h2 {
  color: blue;
}

SCSS

css 复制代码

.card {
  padding: 20px;

  h2 {
    color: blue;
  }
}

两种写法的最终样式效果相同。

三、Sass 最重要的 4 个知识点

1. 变量 `$`（重点）

css 复制代码

$primary-color: #1677ff;
$border-radius: 8px;
$spacing: 16px;

.card {
  background: $primary-color;
  border-radius: $border-radius;
  padding: $spacing;
}

你可以把 $primary-color 理解成一个编译期变量。

2. 嵌套语法（最常见）

普通 CSS：

css 复制代码

.task-card {
  padding: 20px;
}

.task-card .title {
  font-size: 18px;
}

.task-card .status {
  color: green;
}

SCSS：

css 复制代码

.task-card {
  padding: 20px;

  .title {
    font-size: 18px;
  }

  .status {
    color: green;
  }
}

这相当于按照页面 DOM 的层级关系组织样式，阅读起来更清晰。

3. `&` 表示父选择器（非常重要）

css 复制代码

.button {
  background: blue;

  &:hover {
    background: darkblue;
  }

  &.disabled {
    opacity: 0.5;
  }
}

编译后：

css 复制代码

.button {
  background: blue;
}

.button:hover {
  background: darkblue;
}

.button.disabled {
  opacity: 0.5;
}

这里 & 表示当前嵌套规则的父选择器。

注意这两种写法区别：

css 复制代码

.card {
  // card 内部的 title 后代元素
  .title {
    color: blue;
  }

  // 同时拥有 card 和 active 类名的元素
  &.active {
    border-color: green;
  }
}

4. Mixin：复用 CSS 代码

Mixin 可以理解成一个可以接收参数的样式模板。

less 复制代码

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

.loading {
  @include flex-center;
  height: 200px;
}

.modal {
  @include flex-center;
}

这样就不需要重复写三行 Flex 居中代码。

还可以传参数：

less 复制代码

@mixin rounded-box($radius: 8px) {
  border-radius: $radius;
  border: 1px solid #ddd;
}

.card {
  @include rounded-box(12px);
}

四、Sass 是怎么工作的？

Sass 不能直接作为浏览器的样式文件使用，通常需要先编译为 CSS。

index.scss

开发者编写 Sass

Sass 编译器

处理变量、嵌套、Mixin、模块

index.css

浏览器可以直接解析的 CSS

比如你写：

css 复制代码

$color: blue;

.card {
  color: $color;

  .title {
    font-size: 20px;
  }
}

编译后的 CSS：

css 复制代码

.card {
  color: blue;
}

.card .title {
  font-size: 20px;
}

五、Sass 怎么安装和使用？

先安装：

复制代码

npm install -D sass

创建 style.scss：

css 复制代码

$primary-color: #1677ff;

.button {
  background: $primary-color;
  color: white;
  padding: 10px 20px;

  &:hover {
    opacity: 0.8;
  }
}

执行：

复制代码

npx sass style.scss style.css

Sass 就会生成浏览器可以直接使用的 style.css。这是官方支持的命令行用法。

sass-lang.com+1

在配置了 Sass 支持的 React 工程中，也可以直接导入：

javascript 复制代码

import "./style.scss";

function App() {
  return <button className="button">提交</button>;
}

构建工具会负责处理 SCSS 文件。

六、实际项目中的 Sass 模块化

当项目变大时，可以把公共变量单独放一个文件。

复制代码

styles/
├── _variables.scss
├── _mixins.scss
└── index.scss

_variables.scss：

css 复制代码

$primary-color: #1677ff;
$spacing: 16px;

index.scss：

css 复制代码

@use "./variables";

.card {
  color: variables.$primary-color;
  padding: variables.$spacing;
}

这里的 @use 类似 JavaScript 的 import，用于引入其他 Sass 模块。

现代 Sass 推荐使用 @use / @forward，而不是已经弃用的 Sass @import。

sass-lang.com

七、React 开发需要掌握哪些 Sass 知识？

知识点	优先级
`.scss` 和 `.css` 区别	P0
`$变量`	P0
嵌套选择器	P0
`&:hover`、`&.active`	P0
`@mixin` / `@include`	P1
`@use` 模块化	P1
`@extend`	P2
`@function`、`@each`、`@for`	P2

建议你花 30 分钟掌握 Sass 的变量、嵌套和 & 就足够入门。

尤其在 React 业务项目中，最常见的 SCSS 代码可能是：

css 复制代码

.task-list {
  padding: 20px;

  .task-item {
    display: flex;
    justify-content: space-between;

    &:hover {
      background: #f5f5f5;
    }

    &.active {
      border-color: #1677ff;
    }
  }
}

只要你能看懂这段，就已经掌握了 Sass 最常用的写法。

最后总结：CSS 是浏览器使用的样式语言；Sass 是帮助开发者更高效地编写和组织 CSS 的工具。

你不必把 Sass 当成一门全新的语言。它更像是在 CSS 基础上增加了变量、嵌套、复用和模块化能力。

Sass 入门：CSS 预处理器是什么？怎么使用？

一、为什么需要 Sass？

二、Sass、SCSS、CSS 有什么区别？

三、Sass 最重要的 4 个知识点

1. 变量 $（重点）

2. 嵌套语法（最常见）

3. & 表示父选择器（非常重要）

4. Mixin：复用 CSS 代码

四、Sass 是怎么工作的？

五、Sass 怎么安装和使用？

六、实际项目中的 Sass 模块化

七、React 开发需要掌握哪些 Sass 知识？

1. 变量 `$`（重点）

3. `&` 表示父选择器（非常重要）