home / skills / partme-ai / full-stack-skills / dart-sass

dart-sass skill

safe

/skills/dart-sass

This skill helps you install, configure, and effectively use Dart Sass to compile SCSS to CSS and optimize workflows.

npx playbooks add skill partme-ai/full-stack-skills --skill dart-sass

Review the files below or copy the command above to add this skill to your agents.

Files (21)

SKILL.md

4.5 KB

---
name: dart-sass
description: Provides comprehensive guidance for Dart Sass including Sass syntax, compilation, mixins, functions, and best practices. Use when the user asks about Dart Sass, needs to compile Sass to CSS, use Sass features, or work with Sass in projects.
license: Complete terms in LICENSE.txt
---

## 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:

1. **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

2. **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

3. **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

4. **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

5. **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

1. **Use @use instead of @import**: The @import rule is deprecated, use @use and @forward instead
2. **Organize with modules**: Use the module system to organize and share code
3. **Optimize compilation**: Use appropriate output style (compressed for production)
4. **Source maps**: Enable source maps for development, disable for production
5. **Watch mode**: Use --watch for development to automatically recompile on changes
6. **Load paths**: Use --load-path to simplify import paths
7. **Performance**: Use Dart Sass for best performance (faster than Ruby Sass)
8. **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 函数

Overview

This skill provides comprehensive guidance for using Dart Sass to write, compile, and optimize Sass/SCSS for web projects. It covers syntax (variables, nesting, mixins, functions), the module system, CLI and API usage, source maps, and build integration. Use it to set up workflows, improve performance, and apply best practices for maintainable stylesheets.

How this skill works

The skill maps common developer requests to focused documentation and examples: installation, basic usage, compilation modes, and compilation options. It explains Sass language features and the modern module system, then shows how to integrate Dart Sass via CLI, JavaScript, or Dart APIs. Templates and examples provide ready-to-adapt project scaffolding and build tool snippets.

When to use it

You need to install or configure Dart Sass for a project
You want to compile .sass or .scss files to CSS (CLI or API)
You need help using Sass features: variables, mixins, functions, nesting
You want to migrate from @import to @use/@forward or organize modules
You need to integrate Sass into npm scripts, task runners, or CI/CD
You need advice on source maps, watch mode, or compilation performance

Best practices

Prefer @use and @forward over the deprecated @import for predictable namespaces
Organize shared utilities as modules and expose APIs via @forward
Choose output styles: expanded for dev, compressed for production to save bytes
Enable source maps in development and disable them in production builds
Use --watch or build tool integrations to recompile automatically during development
Keep only Sass source files in version control; avoid committing compiled CSS

Example use cases

Set up a basic Sass project scaffold with variables, a core partial, and a theme layer
Compile a project in watch mode with source maps during development and compressed output for production
Use the JavaScript API (compile/compileString) to integrate Sass compilation in a build script
Migrate legacy @import-based stylesheets to the module system using @use and @forward
Create reusable mixins and functions for theming, color math, and responsive utilities

FAQ

Do I need Dart or Node to use Dart Sass?

Dart Sass ships as a standalone package and is available via npm and pub. You can use the CLI without installing Dart, or integrate via JavaScript/Dart APIs depending on your environment.

Should I commit compiled CSS to git?

No. Commit only Sass source files. Generated CSS should be produced by your build or CI pipeline to avoid merge conflicts and keep the repository lean.