SCSS 完整技术文档（CSS 预处理器终极指南）

适配 Vue3 + Vite 开发场景，独立成档，系统讲解：为什么会有 SCSS、SCSS 是什么、核心语法、Vue 项目中怎么用、工程化最佳实践，纯干货可直接用于开发 / 学习 / 面试。

---

一、为什么会出现 SCSS？（原生 CSS 的致命痛点）

在 SCSS 出现前，原生 CSS 只是简单的样式描述语言，完全不支持编程特性，开发大型项目（如 Vue 工程）时痛点极多：

1. 无变量：颜色、尺寸、间距只能硬编码，修改一处要全局替换
2. 无嵌套：层级选择器必须重复写父级，代码冗余、可读性差
3. 无复用：相同样式无法抽离，大量复制粘贴
4. 无模块化：无法拆分文件、无法导入导出
5. 无运算：不能做加减乘除，无法动态计算样式
6. 无逻辑：不支持判断、循环，样式逻辑无法抽象

为了解决这些问题，CSS 预处理器诞生，SCSS 是目前最主流、最强大、Vue 官方推荐的预处理器。

---

二、SCSS 是什么？（核心定义）

1. 官方定义

SCSS（Sassy CSS）是 Sass 的升级版语法，属于 CSS 预处理器：

• 写的时候用 SCSS 语法 → 编译后 → 生成标准 CSS
• 完全兼容 CSS（所有 CSS 代码直接能当 SCSS 用）
• 为 CSS 增加变量、嵌套、复用、模块化、运算、逻辑等编程能力

2. SCSS vs Sass（必区分）

表格

语法	格式	兼容性	现状
SCSS	用 {} ;，和 CSS 写法一致	100% 兼容 CSS	主流，全网通用
Sass	缩进语法，无括号无分号	不兼容 CSS	已淘汰，极少使用

3. 核心定位

Vue 工程化开发的标配样式语言，配合 Vite 开箱即用，大幅提升样式开发效率。

---

三、SCSS 核心特性（带实战示例）

1. 变量（最基础）

统一管理颜色、尺寸、间距，全局复用

// 定义变量：$变量名: 值
$primary-color: #42b983;
$base-font-size: 14px;
$spacing: 20px;

// 使用变量
.box {
  color: $primary-color;
  font-size: $base-font-size;
  padding: $spacing;
}

2. 嵌套语法（Vue 开发最常用）

层级结构和 HTML 保持一致，自动生成后代选择器

// SCSS 嵌套
.container {
  width: 100%;
  .header {
    height: 60px;
    .logo {
      color: $primary-color;
    }
  }
}

// 编译后 CSS
.container { width: 100%; }
.container .header { height: 60px; }
.container .header .logo { color: #42b983; }

3. 父选择器 &（核心）

代表父级选择器本身，用于编写伪类、伪元素、子级串联

.btn {
  color: #fff;
  &:hover { // 编译为 .btn:hover
    background: $primary-color;
  }
  &.active { // 编译为 .btn.active
    border: 1px solid #000;
  }
}

4. 混合宏 @mixin（样式复用）

抽离重复样式，支持传参，相当于样式函数

// 定义混合宏
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 带参数的混合宏
@mixin wh($w, $h) {
  width: $w;
  height: $h;
}

// 使用混合宏
.box {
  @include flex-center;
  @include wh(200px, 200px);
}

5. 继承 @extend（样式共享）

让一个选择器继承另一个选择器的所有样式

.btn {
  padding: 10px 20px;
  border-radius: 4px;
}

.btn-primary {
  @extend .btn; // 继承 btn 所有样式
  background: $primary-color;
}

6. 模块化导入 @import

拆分样式文件，实现模块化管理

// 导入变量文件
@import './variables.scss';
// 导入混合宏
@import './mixins.scss';

7. 数学运算

支持 + - * / % 直接计算样式

.box {
  width: 100% - 40px;
  font-size: $base-font-size * 1.2;
}

8. Vue 专属：深度选择器 :deep()

Vue 中 <style scoped> 样式隔离，修改子组件样式必须用 :deep()

<style lang="scss" scoped>
.parent {
  :deep(.child) { // 穿透子组件样式
    color: red;
  }
}
</style>

---

四、Vite + Vue3 中使用 SCSS（极简步骤）

Vite 内置支持 SCSS，无需配置 loader，仅需安装预处理器即可。

1. 安装依赖

bash

运行

# npm
npm install sass -D
# pnpm（推荐）
pnpm add sass -D

2. 单组件中使用

直接给 <style> 标签加 lang="scss"

vue

<template>
  <div class="box">
    <p class="text">Hello SCSS</p>
  </div>
</template>

<style lang="scss" scoped>
// 直接写 SCSS 语法
$color: #42b983;
.box {
  padding: 20px;
  .text {
    color: $color;
    &:hover {
      font-size: 20px;
    }
  }
}
</style>

3. 全局注入 SCSS 变量 / 混合宏（工程化必备）

避免每个组件都手动导入全局变量，在 vite.config.ts 配置自动注入：

typescript

运行

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入全局 SCSS 文件
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

---

五、SCSS 工程化目录规范（Vue 项目推荐）

plaintext

src/
└── styles/          # 全局样式目录
    ├── variables.scss  # 全局变量（颜色、尺寸、间距）
    ├── mixins.scss     # 全局混合宏
    ├── reset.scss      # 样式重置
    └── global.scss     # 全局公共样式

---

六、SCSS vs 原生 CSS vs Less（对比）

表格

特性	原生 CSS	SCSS	Less
变量	❌ 无	✅ 支持	✅ 支持
嵌套	❌ 无	✅ 支持	✅ 支持
混合宏	❌ 无	✅ 强大	✅ 支持
运算	❌ 无	✅ 支持	✅ 支持
逻辑 / 循环	❌ 无	✅ 支持	❌ 弱
Vue 生态	基础	官方标配	小众
编译工具	无需	Dart Sass	Less.js

---

七、Vue + SCSS 开发避坑指南

1. scoped 必须配合 :deep ()：修改子组件样式不能直接写选择器
2. 变量名必须以 $ 开头：不要和 CSS 属性混淆
3. Vite 只需装 sass：不要装 node-sass（已废弃）
4. 全局变量自动注入：不要在每个组件重复导入
5. 嵌套层级不要过深：最多 3 层，避免 CSS 选择器性能问题

---

八、总结口诀

1. CSS 太弱才用 SCSS，变量嵌套省力气
2. 完全兼容 CSS，Vue 开发标配技
3. & 代表父选择器，伪类伪元素不离
4. mixin 复用样式，extend 继承更省力
5. Vite 装 sass 即用，scoped 穿透用 deep
6. 全局变量一键注，工程样式更整齐

---

需要我为你整理一份 Vue + SCSS 高频常用代码片段（变量、混合宏、布局工具类），直接复制到项目就能用吗？