About the SCSS Compiler
This compiler loads Dart Sass, the reference implementation, and runs it inside the page. That matters because behaviour differs between implementations on exactly the cases people test: division inside math.div(), the module system introduced with @use, slash separated values, and the newer colour functions. What compiles here is what your build produces, assuming your build is on a current Sass release.
Expanded output is the default and is what you want while reading the result. Compressed strips every optional byte and is closer to what ships. The charset option controls whether a @charset "UTF-8" line is emitted when the stylesheet contains non-ASCII characters, which is useful when the CSS will be inlined into a page that already declares its encoding.
The one thing that cannot work in a browser tab is loading files. There is no filesystem, so @use "buttons" or @import "variables" has nothing to resolve against and stops with an error. Built in modules are a different matter and load normally, so @use "sass:math", sass:color, sass:string and the rest all work. Paste any partials you depend on above the code that uses them. Compilation errors are reported with the line, the column and Sass's own message, and the position is highlighted in the editor. For the indented dialect use the SASS Compiler.
How to use
- Paste SCSS on the left, including the contents of any partial it depends on.
- Choose expanded output while you are reading, or compressed when you are copying into production.
- Copy the CSS or download compiled.css. Swap sends the CSS back through the SCSS converter.
Common questions
- Which Sass implementation is this?
- Dart Sass, the same package published as sass on npm, compiled to run in the browser. No server is involved.
- Can I import a partial from my project?
- No. The browser has no access to your files, so paste the partial contents into the editor above the code that uses them.
- Does @use "sass:math" work?
- Yes. Every built in module ships with the compiler, so math, color, string, list, map, selector and meta are all available.
- Why do I get an error about deprecated colour functions?
- Recent Sass releases warn about functions such as darken and lighten. Warnings are hidden here, but a hard error means the function was removed in the bundled version, so switch to color.adjust or color.scale.