Convert simple SCSS variables and nesting to CSS

Expand simple SCSS variables and nested selectors into plain CSS without claiming full Sass compilation.

freeworks offlinenothing uploaded
ToolSCSS to CSS
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Top-level dollar-prefixed declarations are collected and substituted into later values, then each nested selector is combined with its parent. A child beginning with ampersand replaces that marker with the outer selector, while comments are omitted from the emitted subset.

  • The supported subset has no compiler settings because Sass functions, mixins, modules, interpolation, control flow, and scoped variables are not evaluated.

Worked example

Expand a variable and parent hover selector
Replace one colour variable and flatten ampersand nesting
Input
											$primary: #3498db;

.btn {
  color: $primary;
  &:hover {
    color: $primary;
  }
}
Output
												.btn {
  color: #3498db;
}

.btn:hover {
  color: #3498db;
}

When to use this

Component snippets expand colour variables, hover rules flatten ampersand selectors, and small design-system samples demonstrate descendant nesting.

Edge cases

  • darken($colour, 10%) remains an unevaluated function because SassScript functions are outside the subset.
  • A semicolon inside a quoted data value can be mistaken for the end of a declaration.
  • @use, @mixin, @include, interpolation, and scoped variables require Dart Sass rather than this subset.

References