SCSS to CSS Compiler

Runs in browser

Compile SCSS and SASS stylesheets to plain CSS instantly.

Compile SCSS and indented SASS to CSS in your browser. Modern Sass features, optional minification, and .scss/.sass file upload.

SCSS to CSS Compiler tool

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Files never leave your browser.

Drag and drop a file here, or tap to select

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

  1. Pick syntax

    Toggle SCSS (braces) or SASS (indented) above the input.

  2. Paste or upload

    Edit the panel or load a .scss or .sass file below the editors.

  3. Export CSS

    Toggle Minify if needed, then copy or download the CSS file.

Common use cases

  • Testing SCSS nesting and variables — Paste SCSS with nesting, variables, and @mixin declarations to see exactly what CSS they compile to.
  • Checking SCSS output before a build — Compile a snippet to verify that BEM-style &__element and &--modifier selectors output the expected CSS class names.

Examples

  • Variables

    Sass variables compile to concrete values.

    Input
    $gap: 8px;
.box { gap: $gap; }
    Output
    .box {
  gap: 8px;
}

Frequently asked questions

Is Sass running locally?
Yes. The dart-sass compiler runs in your browser bundle; nothing is uploaded to ToolDock servers.
Does indented SASS work?
Yes. Choose the SASS tab for indented syntax; the compiler uses the appropriate Sass syntax mode.

Key concepts

SCSS
Sassy CSS — a CSS preprocessor syntax with variables ($var), nesting, and mixins that compiles to plain CSS.
Sass
The indented syntax variant of SCSS using whitespace instead of braces and semicolons — both compile with the same Sass engine.

Related tools

You might find these useful too.

More css tools

Related Guides

→ Scss Vs Css