Anyone who has written styles in pure CSS knows the pain: hundreds of lines, nested selectors, repeating colors, and media queries scattered across the file randomly. Variables? Mixins? Nesting? In vanilla CSS, it's either workarounds with custom properties or waiting for the next spec draft.

SASS has been solving these problems for a decade and a half. But simply writing in SASS isn't enough, you need the code to automatically transform into minified, production-ready CSS without extra effort. The Atom editor, for which the plugin sass-autocompile was once written, was officially shut down in December 2022. The plugins themselves died along with it.

Fortunately, the tools have only gotten better. In this article, a method relevant for 2026 to set up compilation and minification so it just works: without Atom, without hacks, in any editor.

💡 Quick overview:

• Install Dart Sass CLI, the official SASS implementation
• Run sass --watch for auto-compilation on save
• Add --style=compressed for on-the-fly minification
• For fine optimization, add cssnano or Lightning CSS
• Alternatively, use Live Sass Compiler in VS Code

Why compile SASS: browsers don't understand.scss

Browsers need regular .css. Period. Every time you adjust a variable or mixin, you need a compilation step. Manually running sass input.scss output.css after every save, that's a path to hell. Especially when there are dozens of files and the project is assembled from partials _partial.scss.

Automatic compilation on save is an industry standard. Today it's implemented in Dart Sass with literally one command. Plus minification in the same stream: the output is not just .css, but immediately .min.css, ready for deployment.

Below are three configuration levels: CLI for any editor, VS Code integration, and advanced minification with postprocessors.

Method 1: Dart Sass CLI, the universal approach

Dart Sass is the official reference SASS implementation, written in Dart. Since 2020, it has completely replaced the deprecated Ruby Sass and LibSass/node-sass. The current version as of June 2026 is 1.101.0.

Installation

The simplest path is globally via npm:

1
npm install -g sass

Check that everything installed:

1
sass --version

Alternatives: choco install sass (Windows, Chocolatey), brew install sass/sass/sass (macOS, Homebrew), or a direct archive from GitHub, with no external dependencies, just unpack and add to PATH.

Basic compilation

Compile a file manually:

1
sass styles/main.scss dist/main.css

But the real power is in watch mode. It tracks changes in source files and recompiles automatically:

1
sass --watch styles/:dist/

That's it. You edit _buttons.scss, Dart Sass instantly rebuilds main.css. No editor plugins, no dead Atom packages. Works in any editor and on CI.

Minification on the fly

The --style=compressed flag removes whitespace, line breaks, and comments. The output is production-ready .min.css:

1
sass --watch styles/:dist/ --style=compressed

For most projects, this is enough. Dart Sass compressed removes everything unnecessary, the file becomes noticeably lighter than the source. If you need surgical precision, see the cssnano section below.

Project structure with partials

A typical project is assembled from dozens of partials, files with a _ prefix that SASS doesn't compile separately but inserts into the main file via @use:

1
// main.scss
2
@use 'variables';
3
@use 'mixins';
4
@use 'header';
5
@use 'footer';

Dart Sass tracks the entire dependency chain. You change _variables.scss, main.css gets rebuilt. You change a partial nested inside another partial, it still triggers. The magic of @use and @forward is described in the official documentation.

Method 2: VS Code + Live Sass Compiler, compilation without the console

If the console isn't your daily tool, VS Code has Live Sass Compiler by Glenn Marks. The extension has 2.65 million installs and completely replaces the CLI approach for everyday layout work.

What it does:

• Live compilation .scss → .css on every save (Ctrl+S)
• Output style selection: expanded (readable) or compressed (minified)
• Autoprefixes via settings
• Configurable output folder and extension (.css or .min.css)
• Exclude folders from watch (node_modules, dist)
• Quick enable/disable from the status bar

Installation: Ctrl+P → ext install glenn2223.live-sass → in the status bar at the bottom, a Watch Sass button appears. Click it, and all .scss files in the project automatically compile on save.

Unlike the CLI, you don't need to remember paths to input and output folders, the extension calculates them from the file structure. Downside: only works in VS Code, not on CI.

Method 3: Advanced minification, cssnano and Lightning CSS

The built-in --style=compressed does basic minification: removes whitespace and comments. But it doesn't optimize at the CSS rule level. This is where postprocessors come into play.

cssnano

cssnano is the most popular CSS minifier in the npm ecosystem, built on PostCSS. It does what Dart Sass can't:

• Collapses identical rules into one
• Removes duplicate @import
• Shortens hex colors (#ffffff → #fff)
• Converts time values (0.5s → .5s)
• Removes empty @media and comments
• Merges adjacent rules with identical selectors

cssnano works after SASS compilation, on the ready .css. A typical chain: SASS compilation → PostCSS with autoprefixer → cssnano:

1
sass styles/:dist/ && postcss dist/*.css --use autoprefixer cssnano -d dist/

For non-critical projects, the overhead isn't justified. For production with 100K+ audience, every hundred saved bytes multiplies by traffic.

Lightning CSS

Lightning CSS is a Rust-written minifier from the Parcel team. Positioned as "100 times faster than PostCSS" and by internal tests processes over 2.7 million lines of code per second on a single thread. Besides minification, it can:

• Transpile modern CSS into compatible (CSS Nesting → flat selectors)
• Autoprefixes via browserslist
• Shorten rgba() and hsla() to modern formats

The downside is relative youth and a smaller plugin ecosystem compared to PostCSS. For a new project in 2026, it's at least worth looking at.

In the video, a 90-minute Sass Crash Course from Traversy Media: from installing Dart Sass and SCSS syntax to variables, mixins, @use/@forward, and file organization. All examples are current and work in 2026.

⁉️🤔 Frequently asked questions

node-sass throws an error during installation, what do I do?

node-sass was officially declared deprecated in October 2020. Install Dart Sass: npm install -g sass. Same sass API, but without binary issues on Windows and without Python/Visual C++ in dependencies. All modern projects are on Dart Sass.

Live Sass Compiler doesn't see my SCSS files, what's wrong?

Check that source files aren't excluded in settings. F1 → Live Sass: Watch Sass should show "Watching" in the status bar. If not, check liveSassCompile.settings.partialsList in .vscode/settings.json: by default partials /**/_*.s[ac]ss aren't compiled separately, this is normal.

Can I mix SASS with other preprocessors in one project?

Technically yes, .scss and .less files can sit side by side. Practically, don't do this. Different preprocessors have different mixin and variable syntax, editor plugins conflict, and new team members get confused. Choose one: in 2026 that's SASS (SCSS syntax) for the vast majority of projects.

Do I need cssnano if I'm already using --style=compressed?

For a typical WordPress site or landing page, no. --style=compressed gives almost all the needed result. cssnano makes sense to add when every kilobyte counts: high-traffic projects, Progressive Web Apps, mobile web applications with Core Web Vitals metrics.

Atom Editor is closed, where do I migrate SASS compilation settings?

Code and styles aren't tied to the SASS compiler. The .scss files themselves and project structure don't depend on the editor. Move the project folder to VS Code (code .), install Live Sass Compiler, and continue working. Or simply run sass --watch in the terminal, it works the same in VS Code, WebStorm, Sublime, and even Notepad.

Which tool to choose for your task

Three levels, three scenarios. Choose based on your pain, not someone else's stack from a tutorial.

Layout only, no CI/CD. Install Live Sass Compiler in VS Code. No console, a couple clicks, and it works. expanded for development, compressed before deployment. 2.65 million installs don't lie.

Team development, CI, backend developers nearby. Dart Sass CLI with --watch flag and --style=compressed. One command in a package.json script, and everyone has the same behavior, from Mac to Linux server. No editor dependency.

Production with audience. Add cssnano to the PostCSS chain or try Lightning CSS. Savings relative to pure --style=compressed over thousands of requests per hour translates to megabytes and milliseconds in metrics.

SASS as a language is alive and dominant. Atom is dead. Compilation tools have become simpler, not more complex: Dart Sass CLI covers practically all scenarios without plugins and graphical settings. Try sass --watch right now, it takes 30 seconds.