Skip to content
Numio

SCSS to Standard CSS Converter — Numio

Compiles SCSS (.scss, brace syntax) to plain CSS with Dart Sass, then adds vendor prefixes with Autoprefixer. Variables, @mixin/@include, nesting and built-in modules like sass:math are resolved into flat CSS rules.

Getting compiled CSS from a .scss snippet (for example a Bootstrap-style component) to paste into a project that has no Sass build step.

Scss

CSS

When to use it

  • Getting compiled CSS from a .scss snippet (for example a Bootstrap-style component) to paste into a project that has no Sass build step.
  • Debugging how nesting, &-selectors and color functions such as darken() expand before committing SCSS changes.

How to use

  1. Paste SCSS into the Scss editor, or drop a .scss file on it.
  2. Open Settings to choose Autoprefixer targets: defaults, not ie < 11, last 2 versions, iOS 7, last 3 iOS versions. Only "defaults" is on initially.
  3. Copy the CSS panel result; it is plain CSS that you can save directly as a .css file.

SCSS input

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #0b63f3;
}

Details and limitations

Compilation happens on the server: the page posts your code to /api/sass-to-css, which calls Dart Sass compileString with the scss syntax. Autoprefixer and Prettier formatting then run in a Web Worker in your browser.

Each input is compiled as a single standalone file. @use or @import of your own partials fails with "Can't find stylesheet to import"; built-in modules such as @use "sass:math" work.

If the input produces no CSS (only variables, mixins or functions), the result is a single CSS comment saying no CSS was generated, rather than an error.

FAQ

Does it support @use "sass:math" and other built-in modules?

Yes. Built-in modules like sass:math, sass:color and sass:map are available because the code is compiled by Dart Sass. Only imports of your own files fail, since nothing but the pasted text is sent.

Is my SCSS sent to a server?

Yes. The page posts the code to its /api/sass-to-css endpoint for compilation. Autoprefixing and formatting then happen in your browser. Avoid pasting code you are not allowed to share.

Can I use it for .sass indented syntax?

No, this page compiles with the SCSS syntax, so indentation-based code fails to parse. Use the Sass to CSS page, which sends the indented syntax flag to the same API.

How do I get vendor prefixes for older browsers?

Open Settings and switch on targets such as "last 2 versions" or "not ie < 11". The selected queries are passed to Autoprefixer as its browser list.

Specifications and references