Skip to content
Numio

Sass to Standard CSS Transformer — Numio

Compiles Sass indented syntax (.sass, no braces or semicolons) to plain CSS with Dart Sass, then runs Autoprefixer for the browser targets you pick. Variables, mixins (=name / +name) and nesting are resolved into flat CSS rules.

Checking what an indented-syntax .sass file from an older Rails or Bulma-style project compiles to without setting up a Sass toolchain.

Sass

CSS

When to use it

  • Checking what an indented-syntax .sass file from an older Rails or Bulma-style project compiles to without setting up a Sass toolchain.
  • Producing plain CSS from a .sass snippet to paste into a CMS, email template or codepen that does not accept Sass.

How to use

  1. Paste Sass into the Sass editor, or drop a .sass 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.

Sass input

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #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 indented 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.

Vendor prefixes depend on the selected targets. In the example, user-select gets -webkit- and -moz- prefixes under the "defaults" query.

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

What is the difference between Sass and SCSS here?

This page expects the indented syntax: nesting by indentation, no braces or semicolons, =mixin and +include shorthands. For brace-style code use the SCSS to CSS page; both call the same API with a different syntax flag.

Can I import partials like _variables.sass?

No. The server compiles only the text you paste, with no file system or load paths, so imports of your own files fail. Paste the partial's content above the code that uses it instead.

What happens if my file only contains variables or mixins?

Sass emits no CSS for declarations that are never used, so the page shows the comment /* No CSS generated: ... */. Add a rule that uses the variables or includes the mixin to get output.

Is the output minified?

No. The CSS is expanded and formatted with Prettier. Nested selectors such as &:hover are written out as separate rules like .button:hover.

Specifications and references