dart-sass

适用场景

当用户想要执行以下操作时，使用此技能：

• 安装和配置 Dart Sass
• 将 Sass/SCSS 文件编译为 CSS
• 使用 Sass 语法功能（变量、嵌套、混入、函数等）
• 使用 Sass 模块和导入
• 将 Sass 集成到构建工具或工作流中
• 使用 Sass CLI 命令
• 配置 Sass 编译选项
• 在 JavaScript 或 Dart 项目中使用 Sass
• 优化 Sass 编译性能
• 处理 Sass 源映射

如何使用此技能

使用 Dart Sass：

1. 安装 Dart Sass：

   • 加载 examples/getting-started/installation.md，查看安装说明
   • 加载 examples/getting-started/basic-usage.md，查看基本用法示例
   • 加载 examples/getting-started/compiling-modes.md，查看不同的编译模式

2. 学习 Sass 语法：

   • 加载 examples/syntax/variables.md，了解变量用法
   • 加载 examples/syntax/nesting.md，了解嵌套语法
   • 加载 examples/syntax/mixins.md，了解混入
   • 加载 examples/syntax/functions.md，了解函数
   • 加载 examples/syntax/operators.md，了解运算符
   • 加载 examples/syntax/at-rules.md，了解 at 规则

3. 使用高级功能：

   • 加载 examples/features/modules.md，了解模块系统
   • 加载 examples/features/imports.md，了解导入
   • 加载 examples/features/control-flow.md，了解控制流
   • 加载 examples/features/built-in-modules.md，了解内置模块
   • 加载 examples/features/source-maps.md，了解源映射
   • 加载 examples/features/custom-functions.md，了解自定义函数

4. 需要时查阅 API 文档：

   • api/js-api.md - JavaScript API 参考
   • api/dart-api.md - Dart API 参考
   • api/cli-api.md - CLI 命令参考

5. 使用模板快速开始：

   • templates/basic-project.md - 基础 Sass 项目模板
   • templates/modular-project.md - 模块化 Sass 项目模板
   • templates/build-integration.md - 构建工具集成模板

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

• 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 预处理器，Sass 编译器，Sass 语法，Sass 模块，Sass 混合，Sass 函数，Sass 变量，Sass 嵌套，@use，@forward，@import，@include，@mixin，@function，sass:math，sass:color，sass:string，源映射，Sass 命令行，Sass API，样式预处理器，Sass 编译器，Sass 语法，Sass 模块，Sass 混合，Sass 函数