OnlineConverTools
Sign in

SCSS to CSS

Compile SCSS to CSS with Dart Sass

About SCSS to CSS

SCSS to CSS compiles SCSS with Dart Sass, the reference Sass compiler, inside your browser. Variables, nesting with &, mixins, functions, @extend, control flow (@if, @each, @for), maps, and the built-in modules loaded with @use, such as sass:math or sass:color, all work. Choose expanded CSS to read or compressed CSS to ship. A Sass error, such as an undefined variable, replaces the output with Sass's own message, which shows the line and column. Only the pasted code is compiled: imports of other files fail, and the indented .sass syntax is not accepted.

Example

Expanded output; math.div comes from the sass:math module.

SCSS input

@use "sass:math";
$gap: 12px;
.card {
  padding: math.div($gap, 2);
  .title { font-weight: 600; }
  &:hover { padding: $gap; }
}

CSS output

.card {
  padding: 6px;
}
.card .title {
  font-weight: 600;
}
.card:hover {
  padding: 12px;
}

How to compile SCSS to CSS

  1. 1Paste your SCSS into "SCSS input".
  2. 2Pick "Expanded" for readable CSS or "Compressed" for a single line.
  3. 3Click "Convert"; the CSS, or Sass's error message, appears in "CSS output".
  4. 4Click "Copy", or "Download" to save "styles.css".

Formats and limits

Input
SCSS syntax as text (not the indented SASS syntax)
Output
CSS, expanded or compressed, saved as styles.css
Compiler
Dart Sass, sass package 1.105.0
Modules
Built-in ones only (sass:math, sass:color…); @import or @use of your own files stops with Can't find stylesheet to import

Where your code is processed

Dart Sass, compiled to JavaScript, runs in your browser once you click "Convert", so the stylesheet you paste stays on your device. Error reports are the exception: when compilation fails, Sass's error message is sent, trimmed, to our error log with the tool name and your browser's name and version, and that message can quote the line of SCSS where the error is. An unexpected failure of the page is also reported, with the same details.

Frequently asked questions

Is it a real Sass compiler?

Yes. It runs Dart Sass, the implementation maintained by the Sass team, compiled to JavaScript, so variables, mixins, @extend, control flow, and built-in modules behave as in the sass command-line tool.

Can I use @import or @use with my own partials?

No. Only the pasted code exists here, so importing a partial stops with Can't find stylesheet to import. Built-in modules such as sass:math do load. Paste the content of your partials above your code instead.

Does it accept the indented .sass syntax?

No. The compiler is called with SCSS syntax only, so code written without braces and semicolons is reported as an error. Convert indented Sass to SCSS before pasting it.

Tips and tricks

  • ✓Errors point to line:column in your input: fix the SCSS there and click "Convert" again.
  • ✓Use Compressed for files you deploy and Expanded when you want to review the generated selectors.

Related tools