SCSS to CSS Converter

Someone hands you a chunk of SCSS and you want to see the CSS underneath without installing Dart Sass just to read one file. This page does three things and only three: it deletes variable declaration lines like $color: #333, strips comments that start with a double slash, and rewrites every remaining $color into var(--color). It is a reading aid, not a build step.

Deleting those declarations has a direct consequence: the output references var(--color) while --color is defined nowhere at all. You have to declare them yourself, usually inside a :root block. The comment stripping is a plain regex too, so any double slash starts a comment, including the one inside an absolute URL: a url with https comes out truncated right after the colon.

What it does not do: nesting, the & selector, @mixin, @include, @extend, @use, maps, loops and functions like darken() all pass through to the output exactly as they went in. For a real compile, npx sass input.scss output.css is one command away. Use this page when the SCSS is shallow and you just want the skeleton on screen. The conversion happens in the browser as you type.