SCSS to CSS Converter

Paste SCSS source and get plain CSS — variables are resolved, nesting is flattened, and basic mixins are inlined.

Last updated: May 25, 2026

SCSS Input

CSS Output

.card {
  background: white;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}
.card .title {
  color: #0f766e;
  font-size: 1.25rem;
}
.card:hover {
  background: #0f766e;
  color: white;
}
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #0f766e;
}
@media (max-width: 640px) {
  .card {
    padding: 0.5rem;
  }
}

Converts SCSS to plain CSS. Resolves $variables, flattens nested selectors (including & references), and inlines simple @mixin/@include. Control-flow features (@if, @for, @each) are not supported.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is SCSS to CSS Converter?

SCSS is the brace-syntax flavour of Sass, with features such as `$variables`, nested selectors, parent references (`&`), and `@mixin`/`@include` declarations. Browsers cannot read SCSS directly — it has to be compiled into plain CSS first.

This converter performs a lightweight compile in your browser. It resolves variable references, expands nested selectors into the comma-separated descendant rules a browser expects, replaces `&` with the parent selector, and inlines simple parameterised mixins. `@media`, `@supports`, `@keyframes`, and similar at-rules pass through unchanged with their bodies flattened.

It is meant for quick conversions of straightforward stylesheets — copying a Sass snippet from a tutorial into a static page, prototyping CSS from a component, or sanity-checking how nesting will collapse. Complex features like `@if`, `@for`, `@each`, `@function`, `@use`, and Sass colour helpers (`lighten()`, `darken()`, etc.) are not evaluated and should be replaced manually or compiled with the official Sass tool.

How to Use SCSS to CSS Converter

Paste SCSS code into the input panel, or click Load Sample.

The plain CSS output appears instantly on the right.

Review nested rules and variable substitutions in the preview.

Copy the CSS or download it as a .css file.

Re-check anything that uses control flow or Sass helper functions — those are not evaluated by this tool.

Common Use Cases

Quickly convert a SCSS component into plain CSS for a static HTML page.
Inspect how nested selectors and & references flatten into descendant rules.
Strip $variables from a snippet before pasting it into a CSS-only project.
Prototype CSS examples from Sass documentation without installing a compiler.
Sanity-check the output of mixins and includes before committing them.

Example Input and Output

Flatten a nested SCSS card into descendant CSS rules.

SCSS input

$primary: #0f766e;
.card {
  color: $primary;
  .title { font-weight: 600; }
  &:hover { color: white; }
}

CSS output

.card {
  color: #0f766e;
}
.card .title {
  font-weight: 600;
}
.card:hover {
  color: white;
}

Privacy

All conversion happens locally in your browser. No SCSS or CSS is transmitted to any server.

Sass features that need a real compiler

Use the official Dart Sass compiler when you rely on @if/@for/@each control flow, custom @function definitions, Sass modules, or colour helpers like lighten() and darken().

Frequently Asked Questions

Is this a full Sass compiler?

No. It handles variables, nesting, parent references, and simple mixins. Control flow (@if, @for, @each), @function, @use/@forward modules, and Sass colour helpers (lighten, darken, mix) are not evaluated.

Are @media and @keyframes preserved?

Yes. @media, @supports, @container, and @keyframes blocks pass through with their bodies flattened. Variables inside the prelude are resolved.

What happens to @use or @forward?

These Sass module loaders have no plain-CSS equivalent and are stripped from the output. Plain @import url("file.css") rules are kept as-is.

Does my SCSS get uploaded?

No. Conversion runs entirely in your browser — nothing is sent to a server.