Sass Documentation
Learn to use Sass's powerful features for writing maintainable and scalable CSS.
Getting Started
Installation
Install Sass via npm or use the Dart Sass executable:
$ npm install sass
- For Node.js projects: Add to devDependencies
- For CLI usage: Global installation recommended
- Check official downloads for specific versions
Core Features
Variables
Store and reuse values throughout your stylesheets. Use $ symbol to declare variables.
Nested Syntax
Write CSS that follows the hierarchy of your HTML, avoiding repetition.
Mixins
Reusable chunks of CSS with arguments, creating consistent styling patterns.
Code Examples
Variables Example ▼
$primary-color: #3b82f6;
$body-color: #f9fafb;
body {
background-color: $body-color;
color: $primary-color;
}
Variables let you store values for reuse across your stylesheets.
Nested Selectors ▼
nav ul {
margin: 0;
li {
display: inline-block;
a {
text-decoration: none;
}
}
}
Write cleaner code by leveraging the hierarchy of HTML elements.
Best Practices
Modularization
Split large stylesheets into smaller partials (_partials.sass) for better maintainability.
Consistent Naming
Use a naming convention like BEM (_buttons.sass) and prefix partials with underscore.
Source Maps
Always enable source maps for easier debugging of compiled CSS.
Performance
Limit nested selectors depth and avoid excessive use of expensive functions.