# Sass — The Most Mature CSS Extension Language

> Variables, nesting, mixins, and functions for CSS. Sass compiles to standard CSS and has been the go-to preprocessor for over a decade.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# Sass — The Most Mature CSS Extension Language

## Quick Use
```bash
npm install -g sass
sass input.scss output.css
```
```scss
$primary: #3498db;
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero {
  @include flex-center;
  background-color: $primary;
  .title { font-size: 2rem; }
}
```

## Introduction
Sass (Syntactically Awesome Style Sheets) extends CSS with variables, nesting, mixins, functions, and modules. It compiles to plain CSS that works in every browser. First released in 2006, it remains one of the most mature and widely used CSS preprocessors.

## What Sass Does
- Adds variables for reusable values like colors, spacing, and typography scales
- Supports nesting to mirror HTML structure in stylesheets
- Provides mixins and functions for reusable style logic
- Offers a module system with `@use` and `@forward` for organized codebases
- Compiles SCSS or indented syntax down to standard CSS files

## Architecture Overview
The primary implementation is Dart Sass, a standalone CLI and library written in Dart. It parses `.scss` or `.sass` files into an AST, resolves imports and modules, evaluates expressions and control flow, then serializes the result to CSS. Source maps are generated alongside for debugging. The compiler runs as a native executable or as a JavaScript package via the npm distribution.

## Self-Hosting & Configuration
- Install globally via npm or use as a project dependency
- Most bundlers (Vite, Webpack, Parcel) integrate Sass automatically via their CSS pipelines
- Configure output style (expanded or compressed) via CLI flags or build tool options
- Use `@use` to import partials and keep the global namespace clean
- Enable source maps in development for browser DevTools integration

## Key Features
- Two syntax options: SCSS (CSS-superset braces) and indented (whitespace-based)
- Built-in color, math, string, list, and map functions
- Control directives (`@if`, `@for`, `@each`, `@while`) for dynamic style generation
- Module system that replaces the legacy `@import` with scoped `@use`
- Fast compilation via the native Dart executable

## Comparison with Similar Tools
- **PostCSS** — plugin-based CSS transformation; Sass is a full language extension
- **Less** — similar preprocessor with JavaScript evaluation; Sass has richer control flow and a larger ecosystem
- **Tailwind CSS** — utility-first approach in HTML; Sass extends traditional stylesheet authoring
- **CSS Custom Properties** — native browser variables; Sass variables are compile-time and support complex expressions

## FAQ
**Q: Should I use SCSS or the indented syntax?**
A: SCSS is more popular because it is a superset of CSS — any valid CSS file is valid SCSS.

**Q: Is Sass still relevant with Tailwind and CSS-in-JS?**
A: Yes. Many large codebases rely on Sass for design-system tokens, mixins, and shared style libraries.

**Q: What happened to LibSass and node-sass?**
A: LibSass (C/C++) was deprecated in 2020. The Dart Sass npm package (`sass`) is the official replacement.

**Q: Does Sass support CSS nesting?**
A: Sass has its own nesting. It also passes through native CSS nesting syntax unchanged for browsers that support it.

## Sources
- https://github.com/sass/sass
- https://sass-lang.com

---
Source: https://tokrepo.com/en/workflows/sass-most-mature-css-extension-language-464e0ef6
Author: Script Depot