How to convert CSS to SCSS online, free and in your browser
A CSS to SCSS converter rewrites a flat stylesheet in Sass’s SCSS syntax, with nesting and variables. Paste your CSS into the CSS Input box, or click Load Sample, and the SCSS Output panel fills in as you type. A rule that follows its parent is nested, so .nav a becomes a inside .nav and .button:hover becomes &:hover. Colours and padding, margin and font-size values used more than once become $color-1, $spacing-1 and $font-size-1. Click Copy, or Download to save styles.scss.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). There is no account and nothing to install, and the tool sets no size limit of its own.
Rules are never reordered or merged, so the compiled SCSS applies the same rules in the same order as your CSS. A selector that appears twice in your CSS appears twice in the SCSS. The tool adds nesting and variables only; mixins, functions and Sass modules are yours to add afterwards. The output is SCSS, with braces and semicolons, not the indented Sass syntax.
To compile SCSS back into plain CSS, use the SCSS to CSS converter. To read the CSS you paste more easily, run it through the CSS beautifier first.
Table of Use: what each CSS pattern becomes
| In your CSS | In the SCSS | Controlled by |
|---|---|---|
.header .nav right after .header | .nav nested inside .header | Nest Selectors |
.button:hover or .button.secondary, right after .button | &:hover or &.secondary | Nest Selectors |
.nav > li, right after .nav | & > li | Nest Selectors |
.a, .b (a selector list) | Left flat, never nested | Always |
| The same selector written twice | Written twice, in the same places | Always: rules are never merged |
#3498db used more than once | A line such as $color-2: #3498db; at the top, and $color-2 where it was used | Create Color Variables; only values used more than once |
padding: 10px 20px repeated | padding: $spacing-1 $spacing-2; the numbers follow how often each value is used, ties by first appearance | Create Common Variables |
font-size: 16px twice | $font-size-1 | Create Common Variables |
@media (max-width: 600px) | Kept at the top level as written, with its rules inside | Always |
--brand: #fff (a custom property) | Left exactly as it is | Always |
/* comment */ | Kept next to the rule it describes, or dropped | Preserve Comments |
Once the SCSS is compiled, shrink the result with the CSS minifier, or compare two versions with the text diff tool.
Features
- Four switches. Nest Selectors, Create Color Variables, Create Common Variables and Preserve Comments are all on at first, and the output changes as soon as you flip one.
- Order-safe nesting. Only rules that sit next to each other in the source are grouped. Nesting stops four levels inside the outer rule and is never used inside
@keyframes. - Repeat-only variables. A value gets a variable only if it appears more than once. Colours are matched ignoring the case of hex digits, and variables are numbered by how often they are used, most frequent first.
- Colour forms. Hex colours with 3, 4, 6 or 8 digits, and
rgb(),rgba(),hsl()andhsla()calls. - Length variables. Whole values in px, em or rem for font-size, padding and margin, up to five of each kind. Values inside
calc(),min()orvar(), and values next to a slash such as12px/1.5, are left alone. - Careful with text. Strings,
url()values and data URIs are copied exactly, and a#{that Sass would read as interpolation is escaped. - Declarations outside a rule. Sass rejects them, so each one is written as a
// Skippedcomment instead of breaking the file. - Copy and download. Copy shows Copied! on success, Download saves
styles.scss, and counters show lines and characters for both panels.
Test the SCSS on a page with the HTML previewer, or start new styles with the CSS grid generator and the flexbox generator.
How to use the CSS to SCSS converter
- Paste your CSS into the CSS Input box, or click Load Sample to try the example. Click Clear to start again.
- Under Conversion Options, switch Nest Selectors, Create Color Variables, Create Common Variables and Preserve Comments on or off.
- Read the result in SCSS Output. The line and character counts sit under the panel.
- Click Copy, or Download to save
styles.scss. - Rename the variables to meaningful names such as
$brand-primary, compile with Sass and check that the page still looks right.
Who can use it
- Front-end developers moving a legacy stylesheet to Sass, one file at a time.
- Theme and plugin authors who want nesting and variables in code that started as plain CSS from the box shadow generator or the border radius generator.
- Students learning how SCSS nesting maps onto CSS selectors, by pasting a rule and reading the output.
- Design-system teams finding the colours a stylesheet repeats, then converting colour codes or choosing replacements with the color picker.
FAQs
How do I convert CSS to SCSS?
Paste your CSS into the CSS Input box, or click Load Sample to try an example. The SCSS Output panel fills in straight away, with nested rules and variables. Switch Nest Selectors, Create Color Variables, Create Common Variables and Preserve Comments on or off under Conversion Options, then click Copy or Download to save the result as styles.scss.
Is SCSS the same as Sass, and which syntax does this tool write?
Sass has two syntaxes: the older indented one, and SCSS, which keeps CSS braces and semicolons. This tool writes SCSS. Because every valid CSS file is already valid SCSS, you can also rename a .css file to .scss and convert it piece by piece. To get plain CSS back, compile the SCSS with Sass or paste it into the SCSS to CSS converter.
How does the converter decide what to nest?
A rule is nested when it directly follows the rule it extends. After .header, the rule .header .nav becomes .nav inside it, .button:hover becomes &:hover, .button.secondary becomes &.secondary and .card > .title becomes & > .title. Selector lists such as .a, .b stay flat, and nesting stops four levels inside the outer rule.
Will the compiled SCSS apply the same rules as my CSS?
That is the aim. Every rule stays in its original order, and rules are never merged or moved, so a selector that appears twice stays as two blocks. Strings, url() values and data URIs are copied exactly. Compiling the result gives the same rules in the same order, although spacing and the way a colour is written can differ. Compile it and test before you rely on it.
Which variables does the tool create?
With Create Color Variables on, each hex, rgb(), rgba(), hsl() or hsla() colour used more than once becomes $color-1, $color-2 and so on, most frequent first. With Create Common Variables on, font-size, padding and margin lengths in px, em or rem used more than once become $font-size-N and $spacing-N, up to five of each. Custom properties such as --brand are left alone.
Do I have to convert all my CSS to SCSS at once?
No. Plain CSS is valid SCSS, so a renamed .css file keeps working, and you can convert one file or one section at a time as you touch it. The tool adds only nesting and variables. Mixins, functions, maps and @extend are things you write yourself afterwards, once you see which patterns repeat in your styles.
What is the difference between @import, @use and @forward in Sass?
@use loads another Sass file under a namespace, such as colors.$primary after @use "colors", and @forward re-exports a file’s members. As of October 2026, the Sass documentation at sass-lang.com lists @import as deprecated since Dart Sass 1.80.0, with removal planned for Dart Sass 3.0.0. This tool adds none of them, and rewrites a CSS @import of a bare name as @import url().
Is my CSS uploaded anywhere?
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The conversion is JavaScript on your device, there is no account, and the page does not keep your stylesheet, so reloading it returns to an empty CSS Input box. That makes it safe for private or unreleased code.