Sass / SCSS Playground

Compile Sass and SCSS to CSS live in your browser with Dart Sass. See the output, warnings, and a rendered preview as you type.

Example

Syntax

Output style

Loading Dart Sass…

Sass input

CSS output

Preview HTML

Preview

About this tool

This playground compiles Sass to CSS with Dart Sass, the reference implementation, running entirely in your browser. Nothing you type is sent to a server.

Features

Live compile: Output updates as you type, with compile time and size shown
Both syntaxes: SCSS and the indented .sass syntax
Built-in modules: @use "sass:math", sass:color, sass:map, sass:list, sass:string and sass:meta all work
Errors and warnings: Compile errors with line and column, plus @warn, @debug and deprecation messages
Preview: The compiled CSS is applied to your own HTML in a sandboxed frame (scripts disabled)

Limitations

There is no file system, so @use, @forward and @import can only load the built-in sass: modules, not your own partials or npm packages.