When to use this skill
Use this skill whenever the user wants to:
- Install and configure Dart Sass
- Compile Sass/SCSS files to CSS
- Use Sass syntax features (variables, nesting, mixins, functions, etc.)
- Work with Sass modules and imports
- Integrate Sass into build tools or workflows
- Use Sass CLI commands
- Configure Sass compilation options
- Use Sass in JavaScript or Dart projects
- Optimize Sass compilation performance
- Handle Sass source maps
How to use this skill
To use Dart Sass:
- Install Dart Sass:
- Load examples/getting-started/installation.md for installation instructions - Load examples/getting-started/basic-usage.md for basic usage examples - Load examples/getting-started/compiling-modes.md for different compilation modes
- Learn Sass syntax:
- Load examples/syntax/variables.md for variable usage - Load examples/syntax/nesting.md for nesting syntax - Load examples/syntax/mixins.md for mixins - Load examples/syntax/functions.md for functions - Load examples/syntax/operators.md for operators - Load examples/syntax/at-rules.md for at-rules
- Use advanced features:
- Load examples/features/modules.md for module system - Load examples/features/imports.md for imports - Load examples/features/control-flow.md for control flow - Load examples/features/built-in-modules.md for built-in modules - Load examples/features/source-maps.md for source maps - Load examples/features/custom-functions.md for custom functions
- Reference the API documentation when needed:
- api/js-api.md - JavaScript API reference - api/dart-api.md - Dart API reference - api/cli-api.md - CLI command reference
- Use templates for quick start:
- templates/basic-project.md - Basic Sass project template - templates/modular-project.md - Modular Sass project template - templates/build-integration.md - Build tool integration template
Doc mapping (one-to-one with official documentation)
examples/→ https://sass-lang.com/documentation/
Examples and Templates
This skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).
To use examples:
- Identify the topic from the user's request
- Load the appropriate example file from the mapping above
- Follow the instructions, syntax, and best practices in that file
- Adapt the code examples to your specific use case
To use templates:
- Reference templates in
templates/directory for common scaffolding - Adapt templates to your specific needs and coding style
API Reference
- JavaScript API:
api/js-api.md- JavaScript API for compiling Sass (compile, compileString, etc.) - Dart API:
api/dart-api.md- Dart API for compiling Sass - CLI API:
api/cli-api.md- Command-line interface options and usage
Best Practices
- Use @use instead of @import: The @import rule is deprecated, use @use and @forward instead
- Organize with modules: Use the module system to organize and share code
- Optimize compilation: Use appropriate output style (compressed for production)
- Source maps: Enable source maps for development, disable for production
- Watch mode: Use --watch for development to automatically recompile on changes
- Load paths: Use --load-path to simplify import paths
- Performance: Use Dart Sass for best performance (faster than Ruby Sass)
- Version control: Don't commit compiled CSS files, only commit Sass source files
Resources
- Official Website: https://sass-lang.com/dart-sass/
- Installation Guide: https://sass-lang.com/install/
- Documentation: https://sass-lang.com/documentation/
- GitHub Repository: https://github.com/sass/dart-sass
- npm Package: https://www.npmjs.com/package/sass
- pub.dev Package: https://pub.dev/packages/sass
Keywords
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 函数