SCSS to CSS Converter

What the SCSS to CSS converter does

SCSS has to be compiled before a browser can use it. This SCSS to CSS converter uses Dart Sass, the official Sass implementation, to evaluate your stylesheet and print expanded, readable CSS. It is useful for checking what a loop or mixin generates, for extracting CSS from a Sass theme to use elsewhere, or for sharing styles with someone who does not use Sass.

Example: generating utility classes

@use 'sass:map';
$space: (1: 4px, 2: 8px, 3: 16px);
@for $i from 1 through 3 {
  .mt-#{$i} { margin-top: map.get($space, $i); }
}
.stack > * + * { margin-top: map.get($space, 2); }

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 16px;
}

.stack > * + * {
  margin-top: 8px;
}

The @for loop generated three classes, interpolation built the class names, and map.get from the built-in sass:map module looked up each value.

What is evaluated

• Modules: @use with the built-in sass:math, sass:color, sass:map, sass:list and sass:string.
• Control flow: @if, @each, @for and @while.
• Mixins, functions, placeholders and @extend.
• Nesting and &, including suffixes like &__title.
• Legacy features like @import, darken() and slash division still compile, with deprecation warnings silenced.

Common conversion errors

SCSS to CSS or compile?

Use this page for one-off jobs: checking what a mixin expands to, pulling CSS out of a theme, or answering "what does this loop generate?". In a project you will want the same compiler in your build instead. Dart Sass ships as the sass npm package and a standalone command:

npx sass src/styles.scss dist/styles.css                 # one-off build
npx sass --watch src/styles.scss dist/styles.css         # rebuild on save
npx sass --style=compressed --no-source-map src/styles.scss dist/styles.min.css

Unlike this page, the command line resolves @use of your own partials from the file system and writes a source map unless you disable it. If a project still depends on node-sass, note that it wraps LibSass, which is deprecated and does not support @use or the built-in modules; switching to the sass package gives the same results you see here.

Output style

The CSS uses Dart Sass's expanded style: one declaration per line, two-space indentation, and a blank line between groups of rules generated at the top level. Block comments are kept, and comments that start with /*! would also survive compressed output. No source map is produced, since the CSS is meant to be read or copied rather than debugged in the browser. Warnings from @debug and @warn are not displayed, but @error stops the conversion and shows your message in the status bar.

This converter always prints expanded CSS. The SCSS Compiler runs the same engine and adds a Minify output option for production-ready CSS. To go the other way and turn CSS into nested SCSS, use CSS to SCSS. The conversion runs in your browser and nothing is uploaded.