About the SCSS to CSS Compiler
This is not an approximation: the tool loads the official Dart Sass compiler (the same one behind the sass npm package) and runs it locally. Variables, nesting, mixins with arguments, functions such as darken() and math.div(), placeholder selectors, @extend, control directives and the built-in modules all work. Output can be expanded for reading or compressed for production.
Compilation errors come back with the line and column and Sass's own message, for example "Undefined variable" or "expected }", and the position is highlighted in the editor. Because the compiler is loaded on demand, the first compile takes a moment; later ones are instant.
The limit is imports: @use and @import of other files cannot be resolved because there is no filesystem, so paste the partials inline. Built-in modules such as sass:math and sass:color do work. For the indented Sass syntax use the Sass to CSS tool, and for LESS the LESS compiler.
How to use
- Paste SCSS on the left, including any partials it needs.
- Choose expanded or compressed output.
- Copy the CSS or download it.
Common questions
- Which Sass version is used?
- The current Dart Sass release bundled with this site, which follows the latest Sass specification including the module system.
- Why does @use "variables" fail?
- There are no files to load from. Paste the contents of the partial above the code that uses it.
- Are deprecated functions like darken() supported?
- Yes, they compile, though Sass prints a deprecation notice in real builds. The tool shows only errors.
- Does it produce source maps?
- No. Source maps are a build-tool concern.