Dart Sass 完整指南：安装配置、编译SCSS、语法特性与性能优化

文档映射（与官方文档一一对应）

• examples/ → https://sass-lang.com/documentation/

示例与模板

此技能包含详细的示例，其组织方式与官方文档结构相匹配。所有示例都在 examples/ 目录中（参见上面的映射）。

使用示例：

• 从用户的请求中确定主题
• 根据上面的映射加载相应的示例文件
• 遵循该文件中的说明、语法和最佳实践
• 根据您的具体用例调整代码示例

使用模板：

• 参考 templates/ 目录中的模板以获取常见脚手架
• 根据您的具体需求和编码风格调整模板

API 参考

• JavaScript API : api/js-api.md - 用于编译 Sass 的 JavaScript API（compile、compileString 等）
• Dart API : api/dart-api.md - 用于编译 Sass 的 Dart API
• CLI API : api/cli-api.md - 命令行界面选项和用法

最佳实践

1. 使用 @use 代替 @import ：@import 规则已弃用，请改用 @use 和 @forward
2. 使用模块组织代码 ：使用模块系统来组织和共享代码
3. 优化编译 ：使用适当的输出样式（生产环境使用压缩模式）
4. 源映射 ：开发时启用源映射，生产时禁用
5. 监视模式 ：开发时使用 --watch 以在更改时自动重新编译
6. 加载路径 ：使用 --load-path 来简化导入路径
7. 性能 ：使用 Dart Sass 以获得最佳性能（比 Ruby Sass 更快）
8. 版本控制 ：不要提交编译后的 CSS 文件，只提交 Sass 源文件

资源

• 官方网站 : https://sass-lang.com/dart-sass/
• 安装指南 : https://sass-lang.com/install/
• 文档 : https://sass-lang.com/documentation/
• GitHub 仓库 : https://github.com/sass/dart-sass
• npm 包 : https://www.npmjs.com/package/sass
• pub.dev 包 : https://pub.dev/packages/sass

关键词

dart-sass, sass, scss, css preprocessor, sass compiler, sass syntax, sass modules, sass mixins, sass functions, sass variables, sass nesting, @use, @forward, @import, @include, @mixin, @function, sass:math, sass:color, sass:string, source maps, sass cli, sass api, 样式预处理器, Sass 编译器, Sass 语法, Sass 模块, Sass 混合, Sass 函数

每周安装量

46

仓库

teachingai/full…k-skills

GitHub 星标数

254

首次出现

Jan 24, 2026

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

opencode40

gemini-cli39

codex39

github-copilot36

kimi-cli33

amp33