scss是sass的语法之一，其变量、嵌套、混合宏等能力需配合webpack/vite等构建工具正确配置才能落地；@import在scss中易出错因它是编译时合并而非运行时加载，仅支持本地.scss/.sass文件，且webpack 5+/vite已弃用，应改用@use。
SCSS 本身不是“插件”，而是 Sass 的语法之一；真正提升效率的是它提供的变量、嵌套、混合宏等能力，配合构建工具（如 Webpack、Vite）的正确配置才能落地。
为什么 @import 在 SCSS 中容易出错？
很多人直接把 CSS 的 @import 习惯带到 SCSS，结果发现样式没生效、重复引入、或编译报错。根本原因是 SCSS 的 @import 是编译时合并逻辑，不是运行时加载——它会把目标文件内容原样插入当前文件，且不支持 URL 或外部域名路径。
- 只接受本地
.scss或.sass文件（扩展名可省略），例如@import "variables"对应_variables.scss - 以
_开头的文件是“局部文件”，不会被单独编译成 CSS，适合放变量/混合宏 - Webpack 5+ 或 Vite 默认不再支持
@import（因已弃用），必须改用@use或切换到 Dart Sass - 如果用了
@use，变量和混合宏需显式通过命名空间调用，比如color.primary，避免全局污染
@mixin 和 @include 怎么写才不冗余？
混合宏不是“多写几行就完事”，关键在抽象粒度：太细（如只封装一个 margin-top）反而增加心智负担；太粗（如一个 button-styles 包含所有状态）又难复用。建议按“可变参数 + 合理默认值”设计。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
@mixin flex-center($direction: row) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
}
// 使用
.container {
@include flex-center(column);
}
- 参数名用短横线（
$direction），别用驼峰，符合 SCSS 社区惯例 - 布尔型参数尽量用
true/false，而非字符串"on"/"off" - 避免在
@mixin里写媒体查询断点，应该把断点提取为变量，再由调用方组合使用 - Vite 用户注意：
@use引入的 mixin 必须先@use "path" as *或指定别名才能@include
Webpack/Vite 中 Sass 配置最容易漏掉什么？
装了 sass 和 sass-loader（Webpack）或 sass（Vite）只是第一步。真正卡住开发的，往往是路径别名、自动导入和函数兼容性问题。
- Webpack 需在
sass-loader的additionalData里注入全局变量，否则每个文件都要@use "variables" as * - Vite 中
css.preprocessorOptions.sass.additionalData同理，但注意它不支持@use，只能用@import（Dart Sass 下推荐升级到@use+resolve.alias配合） - Node.js 版本低于 16 时，
sass包可能安装失败，优先用npm install sass（Dart Sass），别用node-sass（已废弃） - 如果你用 Bootstrap 5+，它已完全转向
@use语法，旧项目迁移时@import会直接报错，不能混用
真正拖慢 SCSS 效率的，往往不是语法本身，而是构建链路中对 @use 作用域、路径解析规则、以及 Dart Sass 和旧版 LibSass 行为差异的模糊认知。特别是团队协作时，有人用 Vite 有人用 Webpack，additionalData 和 @use 的写法稍有不一致，就会导致局部样式失效却查不出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
