Online SCSS Compiler and Playground

An online SCSS compiler built for experimenting

Sass rewards trying things out: a function that converts pixels to rem, a breakpoint mixin with @content, a map-driven loop. This online SCSS compiler runs Dart Sass 1.x in your browser and recompiles on every edit, so you see immediately what each change produces. Errors name the line and column, and the line is highlighted in the editor.

Turning finished stylesheets into CSS for a project? SCSS to CSS uses the same Dart Sass build with expanded output and no options. This page adds Minify output and focuses on learning and debugging.

Three snippets to try

Each example below shows real output from this compiler. Paste one in, then change an argument, a selector or a unit and watch how the CSS reacts. Breaking a snippet on purpose is useful too: it shows you the exact message Dart Sass prints for that mistake.

A function

@use 'sass:math';
@function rem($px, $base: 16px) {
  @return math.div($px, $base) * 1rem;
}
.title { font-size: rem(24px); margin-bottom: rem(8px); }

.title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

Change $base in a call, for example rem(24px, 12px), and the output follows. Built-in modules such as sass:math, sass:map and sass:color load without any files.

A mixin with @content and keyword arguments

@mixin respond($bp) {
  @media (min-width: $bp) { @content; }
}
.card {
  padding: 8px;
  @include respond(768px) { padding: 16px; }
}

.card {
  padding: 8px;
}
@media (min-width: 768px) {
  .card {
    padding: 16px;
  }
}

The block passed to the mixin lands where @content sits, and the media query moves outside the rule with .card repeated inside. Arguments can also be passed by name in any order: @include theme($fg: black, $bg: #fde68a) fills each parameter by its name.

The parent selector

.card {
  &__title { font-weight: 600; }
  &--wide { max-width: none; }
  .dark & { background: #111; }
}

.card__title {
  font-weight: 600;
}
.card--wide {
  max-width: none;
}
.dark .card {
  background: #111;
}

& can be a prefix for BEM-style names or placed after another selector to style the component inside a themed container.

Maps and loops

$sizes: (sm: 4px, md: 8px);
@each $k, $v in $sizes {
  .p-#{$k} { padding: $v; }
}

.p-sm {
  padding: 4px;
}

.p-md {
  padding: 8px;
}

Add a third entry such as lg: 16px to the map and a new class appears. Loops like this generate whole sets of utility classes, so checking their output in a playground before adding them to a project helps keep the CSS small. Dart Sass separates rules produced at the top level by a loop with a blank line, which is only formatting.

Error messages you will meet

Each message ends with the position Dart Sass reports. These come straight from the compiler:

Note the second row: Dart Sass notices a missing semicolon only when it reaches the next line, so the position points one line late.

Inspecting values without @debug

This compiler accepts @debug and @warn but does not display their messages. Two workarounds help when you want to see a value. Print it into a custom property with interpolation:

@use 'sass:math';
$ratio: math.div(16px, 3);
.probe { --debug: #{$ratio}; }

.probe {
  --debug: 5.3333333333px;
}

Or stop compilation on purpose with @error "value: #{$x}"; the message appears in the status bar with the position of the call that triggered it.

Where to go next

Prefer the indented syntax? Try the same experiments in the Sass compiler. To tidy the SCSS source itself, use the SCSS Formatter, and to start from existing CSS, CSS to SCSS nests it for you. Compilation stays in your browser.