SCSS to CSS Compiler

Paste your SCSS below and get compiled CSS back instantly. The code is compiled by Dart Sass, the official Sass compiler, so everything works exactly as it would in your build: @use modules, mixins, functions, maps, loops and the indented Sass syntax too. Everything runs in your browser, so your code never leaves your computer.

Need to go the other way? Use our CSS to SCSS Converter.

About SCSS to CSS Compiler

SCSS (Sassy CSS) is the most popular syntax of Sass, a CSS preprocessor that adds variables, nesting, mixins, functions, maps and loops to CSS. Browsers only understand plain CSS, so Sass has to be compiled before it's used on a website. This tool compiles it instantly with Dart Sass, the reference implementation maintained by the Sass team, so the output matches what you'd get from your own build tools.

Here's a small example of SCSS and the CSS it compiles to:

@use "sass:color";

$primary: #17a2b8;
$radius: 5px;

@mixin rounded($r: $radius) {
  border-radius: $r;
}

.btn {
  color: #fff;
  background: $primary;
  @include rounded;

  &:hover {
    background: color.adjust($primary, $lightness: -8%);
  }
}

.btn {
  color: #fff;
  background: #17a2b8;
  border-radius: 5px;
}
.btn:hover {
  background: #128294;
}

Features

• The official compiler – Dart Sass supports every current Sass feature, including the module system (@use and @forward), built-in modules such as sass:math, sass:color and sass:map, mixins with @content, placeholder selectors with @extend, and control flow with @if, @each, @for and @while.
• SCSS or indented Sass – switch Input to compile the original, indentation-based .sass syntax as well.
• Live compile with clear errors – the CSS updates as you type. Errors show the line they occur on, and the last successful result stays visible (dimmed) while you fix them.
• Deprecation warnings – if your code uses features Sass is phasing out, such as darken(), map-get() or / for division, you'll see a warning so you can update it before it stops working.
• Expanded or minified – choose readable CSS with your preferred indentation, or minified CSS ready for production.

Because the compiler runs in your browser, @use and @import can only load Sass's built-in modules, not other files from your computer – paste the contents of those files in instead. The compiler is downloaded the first time you visit and then cached by your browser.