How to use the scss to css converter
- Select the conversion direction: SCSS to CSS or CSS to SCSS.
- Paste your source code into the input area.
- The output updates automatically as you type or paste.
- Copy the compiled CSS or generated SCSS from the result area.
How SCSS to CSS compilation works here
This converter parses SCSS directly in JavaScript instead of calling the Dart Sass compiler. It resolves $variables in scope, so a variable set inside a rule stays local to it. Nesting is flattened by combining parent and child selectors, and a comma-separated list of parents and children is combined into every pairing. For example, .card { .title { color: red; } } becomes .card .title { color: red; }.
The parent selector & is replaced with the full parent string. If you write .btn { &-lg { padding: 10px; } }, the output is .btn-lg { padding: 10px; }. Arithmetic such as 10px + 5px is evaluated, giving 15px, and @media blocks written inside a rule are moved out and wrapped around a copy of that rule. The layout of the CSS output follows the expanded style that Dart Sass prints, including the blank line after each top-level rule that has nested output.
Converting CSS to SCSS (reverse nesting)
When you need to go from CSS to SCSS, the tool nests a rule inside the rule directly above it when its selector starts with the parent selector. For instance, .card followed by .card .title becomes a nested .title block, and .card:hover becomes &:hover. Rules are only nested when they sit directly after their parent, so the cascade order of your stylesheet does not change.
This reverse process helps when migrating a legacy stylesheet to a preprocessor workflow. While automated sass to css compilation is common, going backwards lets teams adopt SCSS step by step without restructuring hundreds of rules by hand. Comments are not kept in either direction, and empty rules are dropped.
Supported and unsupported features
Because this tool runs in the browser, it implements a practical subset of SCSS rather than the full language. Anything outside the subset stops with an error message instead of producing wrong CSS.
| Feature | Status |
|---|---|
Variables ($var, !default, !global) | Supported |
Nesting, & and &-suffix | Supported |
Mixins with arguments and defaults (@mixin, @include) | Supported (no @content) |
Arithmetic (+, -, *, /) | Supported for numbers with the same unit |
Interpolation (#{$var}) | Supported |
Nested @media, @supports, @keyframes, @font-face | Supported |
Plain CSS @import | Kept as written |
@if, @for, @each, @while | Unsupported |
@function, @use, @forward, @extend | Unsupported |
Built-in functions (darken, map-get, and so on) | Unsupported |
| Maps, list functions and colour arithmetic | Unsupported |
If your stylesheet relies on control flow or built-in functions, use the official sass npm package for a complete build step.
SCSS vs Sass syntax
The term "Sass" refers to both the preprocessor ecosystem and its original indented syntax. SCSS (Sassy CSS) is the newer syntax that uses curly braces and semicolons, making it a strict superset of CSS. When developers search for sass to css tools, they usually mean SCSS because it is the dominant format in modern projects.
This converter specifically targets SCSS syntax. If you have files using the older indented Sass syntax (without braces), you will need to convert them to SCSS first before using this tool. The underlying logic for resolving variables and flattening nesting remains the same regardless of which syntax variant you started with.
Integrating with other CSS tools
Once you compile SCSS to CSS, you might want to clean up or transform the output further. You can pass the resulting CSS through a css formatter to ensure consistent indentation and spacing across your team. If file size is a concern for production, running the output through a minifier removes whitespace and comments.
For developers moving away from preprocessors entirely, utility-first frameworks offer another path. Tools that handle css to tailwind conversion can help translate traditional stylesheets into utility classes. Similarly, if your project historically used Less instead of Sass, a less to css converter handles that specific syntax migration.
Worked examples
| Example | Input | Result |
|---|---|---|
| Variables and nesting | Input code: $color: red; / .box { / color: $color; / .inner { / margin: 10px; / } / }; Conversion direction: scss-to-css | .box { / color: red; / } / .box .inner { / margin: 10px; / } |
| Parent selector & | Input code: .btn { / color: blue; / &:hover { / color: darkblue; / } / &-large { / padding: 20px; / } / }; Conversion direction: scss-to-css | .btn { / color: blue; / } / .btn:hover { / color: darkblue; / } / .btn-large { / padding: 20px; / } |
| Mixin and include | Input code: @mixin box($s) { / width: $s; / height: $s; / } / .icon { / @include box(24px); / }; Conversion direction: scss-to-css | .icon { / width: 24px; / height: 24px; / } |
| Arithmetic | Input code: .el { / width: 100px + 50px; / margin: 10px * 2; / }; Conversion direction: scss-to-css | .el { / width: 150px; / margin: 20px; / } |
| CSS to SCSS | Input code: .card { / color: red; / } / .card .title { / font-size: 20px; / } / .card:hover { / color: blue; / }; Conversion direction: css-to-scss | .card { / color: red; / .title { / font-size: 20px; / } / &:hover { / color: blue; / } / } |
FAQ
Does this tool convert SCSS to CSS exactly like the official Sass compiler?
For the supported features, yes: the output layout and values match Dart Sass in expanded style. It does not support control directives like @if or @each, built-in functions like darken(), @extend or module imports, and it shows an error for them. For full spec compliance, use the official Dart Sass compiler.
Can I convert CSS to SCSS automatically?
Yes. Select the CSS to SCSS direction and paste your CSS. A rule is nested inside the rule directly above it when its selector starts with the parent selector, and pseudo-class suffixes such as :hover become ampersand references. Comments and empty rules are dropped.
Is my code uploaded to a server?
No. The entire conversion process happens in your browser using JavaScript. Your stylesheets never leave your device, making it safe for proprietary or unreleased code.
What is the difference between Sass and SCSS?
Sass originally referred to an indented syntax that omitted curly braces and semicolons. SCSS was introduced later as a syntax that fully matches standard CSS formatting while adding preprocessor features. Today, SCSS is the widely preferred format.
Why did I get an error about unsupported features?
The parser found syntax it cannot evaluate, such as @if statements, @each loops, @function, built-in functions like darken(), maps, or an unknown mixin or variable. Replace those parts with static values to use this browser-based converter.
Does it handle math operations in property values?
Yes. Addition, subtraction, multiplication and division work on numbers with the same unit, or with one unitless operand. For example, 10px + 5px evaluates to 15px, and $pad * 2 doubles a variable. Mixing incompatible units such as px and em shows an error.