vite sass（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代前端开发中，Vite 和 Sass 作为两大工具，正以高效、灵活的方式重塑开发体验。Vite 以闪电般的启动速度和无需构建的热更新机制，重新定义了开发流程；而 Sass 通过变量、嵌套、混合宏等特性，让 CSS 变得更易维护和扩展。两者的结合，如同“高效施工队”与“智能设计工具”的强强联合，既降低了开发门槛，又提升了代码质量。本文将从零开始，通过案例和代码示例，带读者一步步掌握 vite sass 的使用，并理解其底层原理。

安装与配置

安装步骤

在开始之前，确保已安装 Node.js 和 npm。接下来通过以下命令创建 Vite 项目：

npm create vite@latest my-sass-project  

选择模板时，选择 vanilla 或 vue 等框架模板均可，因为 Sass 的配置与框架无关。

安装 Sass：

npm install sass  

Sass 的 npm 包名为 sass，它包含了 Dart Sass 的实现，支持所有 Sass 语法。

配置 Vite

Vite 默认支持 Sass，无需额外配置即可使用。只需在代码中引入 .scss 文件，Vite 会自动处理。但若需自定义选项（如启用 CSS 压缩），可在 vite.config.js 中配置：

import { defineConfig } from 'vite';  

export default defineConfig({  
  css: {  
    sass: {  
      // 启用 CSS 压缩  
      charset: false,  
      // 其他选项参考 Sass 官方文档  
    },  
  },  
});  

基本使用示例

变量与嵌套：让 CSS 更易维护

Sass 的变量（$ 开头）和嵌套语法，能大幅减少重复代码。例如，定义按钮样式：

// styles.scss  
$primary-color: #4CAF50;  
$button-padding: 12px 24px;  

.button {  
  padding: $button-padding;  
  background-color: $primary-color;  
  border: none;  
  border-radius: 4px;  

  &:hover {  
    background-color: darken($primary-color, 10%); // 自动计算暗10%的颜色  
  }  
}  

在 HTML 中引入：

<!-- index.html -->  
<link rel="stylesheet" href="/src/styles.scss">  
<button class="button">Click Me</button>  

效果：按钮的样式会根据变量动态生成，且嵌套语法让代码结构更清晰，如同“乐高积木”般拼接逻辑。

混合宏与继承：代码复用的艺术

混合宏（Mixins）

混合宏允许将一组样式封装成可复用的“函数”。例如，定义一个阴影混合宏：

// styles.scss  
@mixin box-shadow($color, $blur) {  
  -webkit-box-shadow: 0 2px 4px $color;  
  box-shadow: 0 2px $blur $color;  
}  

.card {  
  @include box-shadow(black, 8px); // 调用混合宏  
}  

继承（@extend）

通过 @extend 可以继承现有选择器的样式，避免重复代码：

.message {  
  padding: 16px;  
  border-radius: 8px;  
}  

.error {  
  @extend .message;  
  background-color: red;  
}  

类比：混合宏像“预制菜”，直接调用即可；继承则像“模板”，允许基于已有样式快速扩展。

高级技巧与性能优化

按需加载与代码分割

Vite 的按需编译特性与 Sass 结合，可实现更高效的构建。例如，将组件样式拆分为独立文件：

<!-- Button.vue -->  
<template>  
  <button class="custom-button">Vue Button</button>  
</template>  

<script setup>  
import './Button.scss'; // 局部样式仅影响当前组件  
</script>  

/* Button.scss */  
.custom-button {  
  @import "../styles/variables"; // 引入全局变量  
  // 其他样式...  
}  

优势：Vite 会自动将样式按需打包，避免全局样式冲突。

函数与运算符：动态样式生成

Sass 支持数学运算和条件判断，例如：

// 计算动态间距  
$spacing: 16px;  
.content {  
  margin: $spacing * 2; // 自动计算为32px  
  padding: $spacing / 2; // 8px  
}  

// 条件判断  
@mixin responsive-text($size) {  
  @if $size == "small" {  
    font-size: 12px;  
  } @else if $size == "large" {  
    font-size: 24px;  
  }  
}  

类比：这些功能如同“计算器”，让样式可以根据逻辑动态变化。

常见问题与解决方案

问题1：样式未生效

原因：可能未正确引入 .scss 文件或路径错误。
解决：

1. 确保在入口文件（如 main.js）中引入全局样式：

import './assets/styles.scss';  

2. 检查文件路径是否正确。

问题2：Vite 构建时 Sass 报错

原因：Sass 语法错误或版本不兼容。
解决：

1. 更新 sass 包到最新版本：

npm update sass  

2. 检查代码中是否有未闭合的括号或语法错误。

性能优化技巧

1. 启用 CSS 压缩：在 vite.config.js 中配置 css.sass.outputStyle: 'compressed'。
2. 避免深层嵌套：过深的嵌套会生成冗余选择器，影响渲染性能。
3. 使用 CSS Modules：通过 vite-plugin-css-modules 实现样式作用域隔离。

结论

通过本文的讲解，读者应已掌握 vite sass 的核心用法，从基础变量到高级混合宏，从配置到性能优化。两者结合不仅提升了开发效率，还让代码更易维护。未来，随着 Vite 生态的不断完善和 Sass 语法的持续进化，这一组合将成为现代前端开发的标配工具链。

实践建议：

• 尝试将现有项目迁移到 Vite，并逐步用 Sass 重构 CSS。
• 参考官方文档深入探索 Sass 的数学函数、@content 等高级特性。
• 在团队协作中，通过样式约定（如 BEM 命名规范）进一步提升代码可读性。

掌握 vite sass，就如同为代码编写搭建了“智能脚手架”，让开发者能更专注于设计与逻辑实现。