别再让Sass成为您项目里的“花瓶”了！
说实话，咱们前端开发者，谁没学过点Sass呢？语法糖、变量、嵌套、混入……这些概念说起来头头是道。但您有没有发现，很多项目里的Sass代码，写着写着就变成了一团乱麻？变量满天飞却不知道定义在哪，嵌套深得能当迷宫，混入（mixin）和继承（extend）用得随心所欲，最后编译出来的CSS体积大得惊人。
您是不是也遇到过这种情况？团队协作时，每个人写的Sass风格都不一样，最后合并代码简直就是一场灾难。其实，Sass是个非常强大的工具，但用不好，它反而会降低您的开发效率。今天，咱们不聊那些基础的语法，就聊聊怎么把Sass用得“漂亮”，用得“高效”，让它真正成为您项目开发的利器，而不是摆设。
从“能用”到“好用”：构建您的Sass最佳实践
好的Sass项目，从规划目录结构就开始了。千万别把所有文件都堆在一个`style.scss`里！
像搭积木一样组织您的样式
我推荐大家使用“7-1模式”或者类似的模块化架构。简单说，就是把样式分成7个文件夹（base, components, layout, pages, themes, abstracts, vendors）和一个主文件。听起来复杂？其实特别直观。
- abstracts/：放不直接生成CSS的“工具”，比如变量、函数、混入。
- base/：放最基础的样式，比如重置文件、字体定义、盒模型规则。
- components/：放按钮、卡片、导航栏这种可复用的UI组件。
- layout/：放整个网站的骨架样式，比如头部、尾部、网格系统。
- pages/：如果某个页面有特别独特的样式，可以单独放这里。
- themes/：放多主题相关的样式。
- vendors/：放第三方库的样式，比如Bootstrap。
最后，用一个`main.scss`按顺序把这些部分导入（@import）。这样做的好处是，代码结构一目了然，无论是您自己维护，还是新同事接手，都能快速找到想要修改的样式在哪里，协作效率能提升至少50%。
变量与混入：别让“利器”变“凶器”
Sass的变量和混入是两大神器，但滥用就是灾难。咱们先说变量。
坦白讲，把颜色、字体、间距等定义成变量，这大家都知道。但关键是怎么管理？我建议您在`abstracts/_variables.scss`里，把变量分门别类地注释好。
- 颜色变量：不要只定义`$primary-color`，要定义一套从浅到深的色阶，比如`$primary-100`到`$primary-900`，方便后续调整色调。
- 间距变量：定义一套像`$spacing-xs, $spacing-sm, $spacing-md`这样的尺度，整个项目的边距、内距都从这里取，视觉上立刻统一了。
再说混入（mixin）。它适合用来处理需要传参的、逻辑复杂的样式片段，比如清除浮动、媒体查询、多行文字截断。但如果您只是封装一段固定的、不需要变化的CSS，那请用占位符选择器（%placeholder）配合`@extend`，这样编译出的CSS代码更合并、更精简。举个例子，一个单纯的按钮基础样式，用`@extend`就比用`@include`更高效。
与现代构建工具携手共舞：以Vite为例
现在咱们开发，谁还用老旧的构建流程啊？Vite已经是很多项目的首选了。好消息是，在Vite项目里用Sass，简单到不可思议！
您只需要安装一个`sass`包：
npm install -D sass
然后，您就可以直接在`.vue`文件的`