SCSS to CSS Compiler

How to use the SCSS to CSS Compiler tool

1. Paste SCSS into the left editor, or click Upload File for a .scss or .css file. Dummy Data inserts a sample with variables, nesting and a mixin.
2. The Sass engine loads with the page. If you click Compile before it is ready, the error reads "Sass compiler not loaded."; wait a moment and click again.
3. Choose 2 Spaces, 4 Spaces or Tab from the indentation dropdown, then click Compile.
4. The right panel shows plain CSS. If compilation fails, the error names the line in your SCSS, as in "Error line 4: ...".
5. Click Minify to compress the compiled CSS, and Copy Output to copy it. Clear resets both panels.

How to compile SCSS to CSS in JavaScript, PHP and Python

// npm i sass
const sass = require("sass");

const scss = `
$primary: #3490dc;
.btn {
  color: $primary;
  &:hover { color: darken($primary, 10%); }
}
`;

const result = sass.compileString(scss, { style: "expanded" }); // or "compressed"
console.log(result.css);

// Compile a file, resolving @use and @import relative to it:
// sass.compile("src/main.scss", { style: "compressed" }).css

// From the shell:  npx sass src/main.scss dist/main.css --style=compressed

<?php
// composer require scssphp/scssphp
require 'vendor/autoload.php';

use ScssPhp\ScssPhp\Compiler;
use ScssPhp\ScssPhp\OutputStyle;

$compiler = new Compiler();
$compiler->setOutputStyle(OutputStyle::EXPANDED); // or COMPRESSED
$compiler->setImportPaths(__DIR__ . '/scss');    // where @use / @import look

$scss = '$primary: #3490dc; .btn { color: $primary; &:hover { color: darken($primary, 10%); } }';

echo $compiler->compileString($scss)->getCss();

# pip install libsass
import sass

scss = """
$primary: #3490dc;
.btn {
  color: $primary;
  &:hover { color: darken($primary, 10%); }
}
"""

print(sass.compile(string=scss, output_style="expanded"))

# Whole directory:
# sass.compile(dirname=("scss", "css"), output_style="compressed")

Common errors and how to fix them

Error: Undefined variable.

The variable is declared after it is used, or inside another block. Sass reads top to bottom, so move the declaration above the first use or make it global.

Error: Can't find stylesheet to import.

@import (or @use in Dart Sass) points to a file the compiler cannot reach. This page has no file system, so paste the partial's contents inline; LibSass reports it as "File to import not found or unreadable". In a build, add the folder to the include paths.

Error: expected "}".

A missing semicolon or closing brace earlier in the file. Sass reports the line where it gave up, which is often several lines below the real mistake.

Deprecation Warning: darken() is deprecated / Using / for division is deprecated

Dart Sass replaced these with color.adjust(), color.scale() and math.div(). The old forms still compile but will be removed, so run sass-migrator to update them. This page runs LibSass, which does not know the new module functions, so test migrated code with Dart Sass.

Compiled CSS is identical to the input

The file is plain CSS, or you pasted already-compiled output. SCSS is a superset of CSS, so valid CSS passes through unchanged.

Good to know