CSS Custom Properties to SCSS Variables Converter

What this tool does

Paste CSS that uses custom properties (--primary-color: #464aff;, referenced via var(--primary-color)) and get back the equivalent Sass, with $primary-color: #464aff; declarations and $primary-color references — or run it the other way, from $variable-based SCSS back to plain CSS custom properties. Pick a direction, paste, and the converted code appears instantly. Everything runs in your browser; nothing you paste is uploaded anywhere.

CSS → SCSS

• A :root { ... } wrapper is unwrapped: its declarations float up to Sass's global scope, since a Sass variable can't live inside a selector the way a CSS custom property can.
• var(--name) becomes $name when --name is declared in that :root block.
• var(--name, fallback) resolves the fallback for you when --name has no declaration to point at — including a fallback that's itself a nested var().
• Comments, selectors and formatting outside the parts being converted are left exactly as you wrote them.

SCSS → CSS

• A $name: value; declared at the top level moves into a generated :root { ... } block, since a bare custom property can't exist outside a selector in CSS.
• A $name: value; declared inside a selector converts in place to --name: value;, keeping its scoping.
• Every $name reference becomes var(--name). A trailing !default is dropped — its "assign only if unset" behavior has no static CSS equivalent.

What it won't do

This is a variable-syntax converter, not a Sass compiler. Mixins, @if/@each, @function, string interpolation (#{...}) and Sass math aren't evaluated — a value like $base * 2 becomes var(--base) * 2 as plain text, which you'd wrap in calc() by hand to get valid CSS. A --name declared inside a conditional selector (a [data-theme="dark"] override, a @media breakpoint tweak) is left as-is rather than converted, since a compile-time Sass variable can't represent a value that changes per media query or cascade.

FAQ

Will this compile my whole Sass file to CSS? No — only variable declarations and references are translated. Nesting, &, mixins and everything else pass through untouched. Run the result through a real Sass compiler (or the SCSS / Sass Formatter to tidy the output) for anything beyond variables.

What happens to var() fallback values on the way to SCSS? If the referenced custom property is declared elsewhere in your input, the fallback is dropped — the Sass variable already has a real value. If it isn't declared anywhere, the fallback itself is used in its place, so the converted code doesn't reference an undefined variable.

Does it handle CSS variables scoped outside :root, like dark-mode overrides? No, by design — a --name re-declared under a media query or a [data-theme] selector is a runtime override that has no equivalent in Sass's compile-time variables, so those declarations are left as plain CSS rather than silently producing a wrong snapshot.

Privacy

Everything runs locally in your browser. Your code is never uploaded or stored anywhere.