Skip to content

SCSS to CSS Compiler

Compile SCSS or indented Sass to plain CSS in your browser with the official Dart Sass compiler, expanded or minified.

Runs in your browser (background thread)SCSS → CSS
Loading tool…

Example

Input
$c: #333;
.nav {
  ul { margin: 0; }
  a { color: $c; &:hover { color: red; } }
}
Output
.nav ul {
  margin: 0;
}
.nav a {
  color: #333;
}
.nav a:hover {
  color: red;
}

How to use the SCSS to CSS Compiler

  1. Paste SCSS (or choose "Sass (indented syntax)" for .sass files) and press Convert.
  2. Built-in modules such as @use "sass:math" and "sass:color" work; imports of your own partials do not.

Privacy and limitations

  • Your data is processed on your device and is not uploaded to any server.
  • @use, @forward and @import of other files can't be resolved because there is no file system; paste the imported code inline. Plain CSS imports such as @import "x.css" are passed through.
  • The compiler is several megabytes, so it downloads the first time you convert; it runs in a background worker so the page stays responsive.
  • Compilation is stopped after 15 seconds to guard against endless @while loops. Source maps are not generated.

Frequently asked questions

Which Sass version is used?

The official Dart Sass compiler (the sass npm package), so modern features like @use, math.div() and color.adjust() behave exactly as in your build tool.

Is my code uploaded?

No. Compilation happens entirely in your browser.

Related converters

Less to CSS CompilerCompile Less to CSS in your browser: variables, mixins, guards, operations and colour functions, readable or minified.SCSS FormatterFormat SCSS/Sass stylesheets with Prettier, handling nesting, variables, mixins and maps.CSS MinifierMinify CSS by stripping comments and whitespace and dropping redundant semicolons, without touching strings or URLs.CSS Specificity CalculatorCalculate the specificity (A,B,C) of CSS selectors, including :is(), :not(), :has() and :where(), and see which wins.CSS to JS Object ConverterConvert CSS declarations or rules into camelCase JavaScript style objects for React, CSS-in-JS or JSON.CSS Border Radius GeneratorSet each corner radius in px, % or rem with a live preview and get the shortest border-radius shorthand.CSS Box Shadow GeneratorBuild layered CSS box-shadow values visually with offset, blur, spread, colour, opacity and inset controls.CSS Gradient GeneratorDesign linear, radial and conic CSS gradients with up to five colour stops, a live preview and copy-ready CSS.

Browse all css tools →