SCSS to CSS Converter
Compile SCSS to plain CSS in your browser, or convert it to Sass, LESS and Stylus.
Compile SCSS to plain CSS in your browser, or convert it to Sass, LESS and Stylus.
Browsers only read plain CSS, so every Sass project is compiled before it ships. Choose SCSS to CSS, paste your code and click Run: the compiler substitutes variables and functions, expands nested selectors into full chains, inlines mixins and evaluates @if / @each loops. @import or @use of other files cannot be followed, because only the pasted code is available, and Dart Sass-only module features may not compile. Nothing you paste is uploaded.
| SCSS feature | Compiled to CSS as |
|---|---|
$brand: #4f46e5; … color: $brand; | color: #4f46e5; (variable removed) |
.nav { a { … } } | .nav a { … } |
&:hover { … } inside .btn | .btn:hover { … } |
@include button(lg); | The mixin body, inlined with arguments filled |
@each $c in red, blue { … } | One expanded rule per loop iteration |
$brand: #4f46e5;
.nav {
a { color: $brand; &:hover { color: darken($brand, 10%); } }
}compiles to
.nav a { color: #4f46e5; }
.nav a:hover { color: #291fd9; }To deploy to a platform with no build step, to see exactly what a mixin expands to, to debug an unexpected selector chain, or to remove Sass from a project entirely.
Yes. It runs LibSass (compiled to JavaScript as sass.js) in your browser, so variables, nesting, mixins, functions and loops are compiled to plain CSS. Only imports of other files and Dart Sass-only features are out of reach.
They are two syntaxes of the same language. SCSS uses braces and semicolons like CSS; Sass (.sass) uses indentation. Pick SCSS to SASS in the menu to convert between them.
Browsers only understand CSS. You also convert to inspect mixin output or to drop Sass from a codebase.
No. Everything on this page runs in your browser. Your source is never sent to a server.