Setting Up SASS in a Project

To start using SASS you need a compiler that transforms .scss files into .css. The official Dart SASS implementation is the current recommended compiler. You can install it globally via npm with `npm install -g sass`, or as a project dependency with `npm install --save-dev sass`. The CLI command `sass input.scss output.css` compiles a single file, while `sass --watch src/scss:dist/css` watches an entire directory. Modern build tools integrate SASS compilation seamlessly. Vite supports SASS out of the box once the `sass` package is installed — just import a .scss file in your JavaScript or reference it in index.html. Webpack uses `sass-loader` alongside `css-loader`. Laravel Mix and Parcel have built-in SASS support requiring minimal configuration. A typical project structure places all .scss source files under a `src/scss/` directory with a main entry point (often `main.scss` or `app.scss`) that imports partials. The compiled CSS is output to `dist/css/` or `public/css/`. Using a watch mode during development means every save immediately recompiles the stylesheet.

Example

// ── Project setup steps & file structure ─────────────────────────────────────

// Terminal: install Dart SASS as a dev dependency
// npm install --save-dev sass

// package.json scripts section
// {
//   "scripts": {
//     "sass:build" : "sass src/scss/main.scss dist/css/main.css --style=compressed",
//     "sass:watch" : "sass --watch src/scss:dist/css"
//   }
// }

// Recommended directory layout
// my-project/
// ├── src/
// │   └── scss/
// │       ├── main.scss          ← entry point (imports everything)
// │       ├── _variables.scss    ← design tokens
// │       ├── _mixins.scss       ← reusable blocks
// │       ├── _base.scss         ← resets / global styles
// │       └── components/
// │           ├── _buttons.scss
// │           └── _cards.scss
// └── dist/
//     └── css/
//         └── main.css           ← compiled output (do NOT edit by hand)

// src/scss/main.scss — entry point
@use 'variables';
@use 'mixins';
@use 'base';
@use 'components/buttons';
@use 'components/cards';

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned