正确接入sass需安装对应构建工具插件（如vite用vite-plugin-sass）、入口文件用.scss后缀、依赖文件以下划线命名并统一用@use引入；@use替代已废弃的@import，支持命名空间隔离与按需加载；mixins须定义在@use文件中且参数类型完整；%placeholder需配合@forward导出并显式@use后才能被@extend调用。
怎么在CSS项目里正确接入Sass而不搞乱构建流程
直接用 @import 原生 CSS 文件会绕过 Sass 编译，导致变量、mixins 全失效；Webpack/Vite 等工具需要明确配置 Sass 加载器，否则 .scss 文件会被当纯文本处理。
实操建议：
- 确保安装了对应构建工具的 Sass 插件：Vite 用
vite-plugin-sass，Webpack 用sass-loader+css-loader - 入口 CSS 文件必须是
.scss或.sass后缀，不能是.css—— 否则整个链路不会触发 Sass 解析 - 所有依赖的变量/函数文件，统一用
_xxx.scss命名（下划线前缀），再用@use或@import引入，避免全局污染
Sass里@use和@import到底该选哪个
@import 是旧写法，已废弃（Sass 1.90+ 警告），它会把所有被引入文件的内容直接注入当前作用域，容易冲突；@use 则默认隔离命名空间，更安全，也支持按需加载成员。
实操建议：
- 一律用
@use "variables"，而不是@import "variables" - 如果要重命名命名空间，写成
@use "mixins" as m;，之后调用m.text-center() - 想暴露全部成员到全局？可以加
with显式传参，但别滥用——比如@use "variables" with ($primary: #2563eb);
写mixins时为什么参数没生效，或者编译报错"Undefined variable"
常见错误是把 mixins 定义在局部作用域（比如某个组件 SCSS 文件里），又在别的文件里调用；或者参数类型不匹配，比如传了字符串却当成颜色处理。
实操建议：
-
mixins必须定义在被@use的文件中（如_mixins.scss），且调用前确保已@use该文件 - 参数默认值要写全类型，比如
@mixin btn($bg: #3b82f6, $radius: 4px)，别只写$radius: 4（单位缺失会导致计算失败） - 在
mixins内部用@if做类型判断比硬编码更稳，例如@if type-of($bg) == "color"
用%placeholder继承样式，为什么最终CSS里没看到复用效果
%placeholder 不会单独输出 CSS，只有被 @extend 调用时才合并；如果 @extend 目标选择器不存在、或跨 @use 边界未导出，就会静默失败，也不报错。
实操建议：
- 把
%reset这类占位符统一放在_placeholders.scss，并在该文件末尾用@forward暴露出去 -
@extend只能在同一作用域或通过@use显式导入后使用，不能跨@use隐式访问 - 优先考虑
@include+mixins替代@extend，后者在复杂选择器嵌套时容易产生意外的 CSS 膨胀
模块化不是靠文件拆多就能成的，关键在 @use 的路径组织和命名空间控制。很多人卡在 @use 后找不到 mixins，其实只是忘了在源文件里加 @forward 或拼错了路径里的下划线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
