CSS to SCSS Converter
Beautify, minify, validate, and convert CSS-family source in one place.
Beautify, minify, validate, and convert CSS-family source in one place.
SCSS is a superset of CSS: paste any valid stylesheet into a .scss file and Sass compiles it unchanged. So converting is not about making the code parse — it already does — it is about adopting Sass features. This tool takes the first and most mechanical step: it turns CSS custom properties into Sass variables. It runs in your browser and your CSS is never uploaded.
Input:
:root {
--brand: #4f46e5;
--gap: 16px;
}
.card {
color: var(--brand);
padding: var(--gap);
}Output:
:root {
$brand: #4f46e5;
$gap: 16px;
}
.card {
color: $brand;
padding: $gap;
}You would then lift the two $ declarations out of :root to the top of the file or a _variables.scss partial, since Sass variables are resolved at compile time and do not need a selector.
| Feature | CSS | SCSS |
|---|---|---|
| Variables | --x / var(--x), resolved in the browser | $x, resolved at compile time |
| Nesting | Native nesting is newer and limited | Full nesting, & parent selector |
| Reuse | Utility classes, @layer | @mixin, @include, @extend, functions |
| Files | @import (extra HTTP request) | @use / @forward, bundled at build |
It is a syntax rewrite, not a build tool. It does not resolve @import, split code into partials, generate mixins, or infer nesting from your selectors — nesting changes specificity, so it has to be a deliberate choice. Treat the output as a scaffold you refine by hand, then compile with a real Sass toolchain.
Almost. SCSS is a strict superset, so a renamed .css file usually compiles as-is. This tool exists to move you onto Sass features, starting with variables.
--name: value; becomes $name: value; and var(--name) becomes $name. Nothing else.
Guessing which selectors belong together changes specificity and can break the cascade, so flat rules are left flat.
No. The rewrite runs in JavaScript on this page.