Compile SCSS to CSS Online — Dart Sass Browser Compiler

Compile one SCSS snippet or bundle a local project folder with native @use and @import resolution in your browser. Output style, source maps for single files and deprecation warnings are configurable — nothing is uploaded.

Loading…
SCSS compiler — browser playbook
Compile SCSS snippets to standard CSS before minifying or sharing. Ideal when Sass CLI is not installed or you need a quick preview.

Developer notes

• The single-file editor uses SCSS syntax; project bundles also accept indented .sass files. • Drop a project folder to resolve local @import / @use paths. node_modules, packages and remote URLs are not resolved. • Auto-compile runs on paste and sample load; typed edits require Compile (⌘↵). • Source maps are inlined for single files and unavailable in bundle mode v1. • Pair with beautify-scss or minify-css for the full pipeline.

Bundle local partials

Choose Bundle project, drop a folder, then select one entry file. FastMinify preserves relative paths and lets Dart Sass discover reachable .scss and .sass partials through @use or @import. The browser-local bundle is limited to 32 MiB per file and 32 MiB total. Version 1 has one entry, no source maps and no node_modules package resolution.

Options

Output style
Controls CSS formatting: expanded (readable), compressed (minified), compact, or nested.
Source map
Appends an inline data: URI sourceMappingURL comment to the CSS output for debugging.
Silence deprecations
Hides Sass deprecation warnings in the console for legacy built-in functions.

When teams pick this route

• Convert a SCSS snippet from a design system doc to plain CSS. • Preview compressed output before pasting into a CMS. • Teach SCSS variables and nesting with instant CSS feedback. • Prototype mixins without installing Dart Sass locally.

Worked examples

Variables and nesting

SCSS input

$brand: #336699; $spacing: 8px; .card { padding: $spacing; .title { color: $brand; } }

Compiled CSS

.card { padding: 8px; } .card .title { color: #336699; }

Mixin with parameters

SCSS input

@mixin rounded($radius: 4px) { border-radius: $radius; } .btn { @include rounded(8px); background: #eee; }

Compiled CSS

.btn { border-radius: 8px; background: #eee; }

Navigate related tools

Beautify SCSS with beautify SCSS, decompress with unminify SCSS, or browse the CSS preprocessors hub.

SCSS compiler FAQ

Browser-only compilation

Why can't I use @import for external libraries?

Project bundles resolve local files that you drop into the browser. Paths to node_modules, packages, CDNs or files outside that dropped folder are not available.

Does it support indented SASS syntax?

The single-file editor uses SCSS curly-brace syntax. Project bundle mode also accepts .sass files and loads them with indented syntax.

When does compilation run automatically?

On paste and when loading a sample. While typing, use the Compile button or ⌘↵ — live compilation on every keystroke is intentionally disabled.

Is a project bundle the same as concatenating files?

No. Dart Sass starts from one entry file and resolves only the @use and @import dependencies it reaches. File order is not manually concatenated. Bundle mode v1 is limited to one entry, 32 MiB total, no source maps and no npm package imports.

CSS preprocessors

Compile SCSS or LESS to standard CSS in the browser — pair with beautify or minify for a full stylesheet workflow.

Compile LESS to CSS

Explore other tool categories

Minify

Shrink code and assets for production — minify JavaScript, CSS, HTML, JSON and XML before gzip or CDN deploy.

Unminify

Expand minified or compressed code — unminify JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML and other formats when debugging or reviewing.

Conversion

Transform data between JSON, YAML, XML and CSV locally — no server uploads.

Encoding

Encode or decode Base64, URL components and HTML entities — client-side only.

Serialization

Serialize and deserialize PHP data structures beside JSON workflows.

JSON Tools

Validate, format, diff and explore JSON payloads — complementary to minifiers and converters.

SVG Tools

Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.

Beautify

Make code readable with consistent indentation — beautify JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML and more in your browser.

Color & CSS Tools

Paste-local WCAG contrast checking with modern CSS color syntax — pair and matrix views, never uploaded.

DevOps & Infra

Terraform HCL format/validate/minify, Dockerfile format & lint, Docker Compose and .env validation.

CI/CD

GitHub Actions and GitLab CI — format YAML and check workflow/job structure in your browser.

Logs & observability

Line-oriented JSON/NDJSON and Nginx/Apache access logs — format, filter, validate, and CSV/TSV.

Kubernetes

Multi-doc manifests, structural validate, Ingress/Deployment starters, and Helm values formatting.

Networking / IP

CIDR, subnets, and IPv4/IPv6 helpers — in your browser.

Security & tokens

JWKS, X.509 certificates, and secrets scan — browser-local.

API & schemas

OpenAPI tools to format, validate, and lint your specs.

HTTP Tools

Paste-local cURL, HTTP messages, URLs, HAR files, and Cookie / Set-Cookie headers — format and inspect in your browser, never sent.

Developer utilities

Timestamps, UUID, ULID, Nanoid, cron, passwords, regex, slugify, number bases, case, text diff, and chmod — all client-side.

Text & Markdown

Count words, build Markdown TOCs, and clean line lists — all in your browser.

AI & LLM

Token counting, pricing estimates, and context-window fit — 100% browser-local.

Test Data

Synthetic field values for fixtures and DB seed — reserved-range phone numbers first.