How to convert SCSS to CSS, free and without uploading
To convert SCSS to CSS, paste your code into the SCSS Input box, click Open file, or click Load Sample to try it. The CSS Output panel fills in as you type. Choose Expanded, Nested or Compressed under Output Style, then click Copy, or Download to save styles.css. The built-in sample, 60 lines and 993 characters of SCSS, compiles to 48 lines and 555 characters of Expanded CSS, or one 429-character line when Compressed. Errors appear in a Could not compile box with the line number, and a Variable Resolution panel lists the final value of each top-level variable.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The compiler is a script that ships with the page, and files chosen with Open file are read on your device. There is no account and nothing to install.
SCSS, short for Sassy CSS, is the brace-and-semicolon syntax of Sass, a CSS extension that adds variables, nesting, mixins and functions. Browsers read only plain CSS, so SCSS must be compiled before it ships. This page compiles one file at a time, which suits learning, checking a snippet and small stylesheets. For a whole project with partials, use Dart Sass, the official implementation, from the sass npm package. To go the other way, try the CSS to SCSS converter, and shrink plain CSS with the CSS minifier.
Table of Use: what SCSS becomes
| SCSS you write | CSS you get | Note |
|---|---|---|
$gap: 8px;
.a { width: $gap * 2; } | .a { width: 16px; } | Variables and arithmetic are worked out |
.nav { a { &:hover { color: red; } } } | .nav a:hover { color: red; } | Nesting is flattened and & is the parent selector |
@each $n, $c in (info: red, ok: green) {
.t-#{$n} { color: $c; }
} | .t-info { color: red; }
.t-ok { color: green; } | Loops and #{} interpolation write one rule per item |
%btn { border: 0; }
.a { @extend %btn; }
.b { @extend %btn; } | .a, .b { border: 0; } | A placeholder is merged into the selectors that extend it |
@mixin tablet {
@media (min-width: 768px) { @content; }
}
.a { @include tablet { padding: 2rem; } } | @media (min-width: 768px) {
.a { padding: 2rem; }
} | A mixin with @content, media query bubbled to the top |
@media screen {
.a { @media (min-width: 600px) { x: y; } }
} | @media screen and (min-width: 600px) {
.a { x: y; }
} | Nested media queries are merged with and |
.a { color: darken(#3498db, 10%); background: mix(red, blue, 50%); } | .a { color: #217dbb; background: #800080; } | darken() and mix() return hex values |
@use "sass:math";
.a { width: math.div(10px, 4); } | .a { width: 2.5px; } | Built-in sass: modules work, also with as |
@import "partial"; | (nothing) | Skipped with a warning: paste the partial above instead |
@mixin m($args...) { x: y } | Error: Line 1 | Variable arguments are not supported and stop with a line number |
Rules are shown on one line here to save space; Expanded output puts each declaration on its own line.
Features
- Three output styles. Expanded puts one declaration per line, Nested indents rules to mirror your SCSS, and Compressed removes all whitespace and comments except
/*! */ones. - Language coverage. Variables with !default and !global, nesting, @mixin and @include with arguments and @content, @function, @if and @else, @each, @for, @while, @extend and %placeholders, maps, lists and maths.
- Built-in functions. Colour (darken(), mix(), rgba(), color.adjust()), string, list, map (including map.deep-merge()) and math (math.div(), math.clamp()) functions, plus
@useof the sass: modules. - Errors with line numbers. Syntax errors, undefined variables and unsupported features are reported as Line N instead of producing broken CSS.
- Warnings. Skipped imports and an @extend whose target does not exist are listed in an amber box above the output.
- Variable Resolution. Shows the value each top-level variable ends with, such as
$spacingat 20px. - Open file, Copy and Download. Open file accepts .scss and .css files, and Download names the result after the file you opened.
- Line and character counts for both the input and the output, so you can see what Compressed saves.
How to use the SCSS to CSS converter
- Paste SCSS into the SCSS Input box, or click Open file to load a .scss file. Click Load Sample for an example, and Clear to empty the box.
- Under Output Style, choose Expanded, Nested or Compressed.
- Read the CSS Output panel. If a Could not compile box appears, fix the line it names.
- Check any amber warnings, such as a skipped import, and paste the missing file above your code if you need it.
- Look at the Variable Resolution panel to confirm each variable has the value you expect.
- Click Copy, or Download to save the .css file.
Who can use it
- Front-end developers checking what a mixin or @extend really produces, then tidying the result with the CSS beautifier.
- Students learning Sass, who can compare input and output side by side and look up colours in the color picker.
- Designers turning a snippet from a tutorial into CSS, for example one built with the gradient generator or the box shadow generator.
- Reviewers comparing two compiled stylesheets in the text diff tool.
- Layout builders who prototype with the flexbox generator or the CSS grid generator and then move the rules into SCSS.
FAQs
How do I convert SCSS to CSS online?
Paste your SCSS into the SCSS Input box, click Open file, or click Load Sample. The CSS Output panel fills in as you type. Choose Expanded, Nested or Compressed under Output Style, then click Copy or Download. Download saves a .css file named after the file you opened, or styles.css if you pasted the code. There is nothing to install.
Which SCSS features does the converter compile?
Variables with !default and !global, nesting and &, #{} interpolation, @mixin with @include and @content, @function, @if and @else, @each, @for, @while, @extend with %placeholders, maps, lists, arithmetic, nested @media queries, and common colour, string, list, map and math functions such as darken(), mix(), nth(), map.get() and math.div().
Can it compile @import or @use of my own SCSS files?
No. It compiles only the code in the box, so an @import or @use of your own partial is skipped and the converter shows a warning. Paste the partial above the code that uses it. Built-in modules such as @use "sass:math" work, and plain CSS imports like @import url(...) are kept. As of October 2026, the Sass documentation lists @import as deprecated since Dart Sass 1.80.0.
Is my SCSS uploaded anywhere?
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The compiler is a script that ships with the page, and a file chosen with Open file is read on your device. Nothing is sent to ZipConvert or anyone else, so private stylesheets stay on your machine.
Which output style should I use?
Use Expanded while you work, because it is easy to read and review. Use Compressed for a file you will deploy: it removes whitespace and comments except /*! */ license comments, and the built-in sample drops from 555 to 429 characters. Nested indents each rule to mirror your SCSS nesting, which helps when you compare output with source.
Does it support the indented .sass syntax?
No. The converter reads SCSS, the syntax with braces and semicolons. Code in the older indented .sass syntax cannot be parsed as SCSS and normally stops with a Could not compile message. Convert the file to SCSS first, or compile it with the official Sass compiler, Dart Sass, which reads both syntaxes.
What happens when my SCSS has an error?
A red Could not compile box shows the message and the line number, for example Line 1: undefined variable $nope, and the CSS Output panel waits until you fix it. Features the converter does not support, such as variable arguments ($args...), are reported the same way instead of being copied into the CSS as if they were valid.