Esta página aún no está traducida al español, así que la mostramos en inglés.

SCSS to CSS Compiler — Sass Online

Paste SCSS or indented Sass and get plain CSS, compiled by the official Dart Sass engine in your browser — with clear error messages pointing to the exact line.

Actualizado el
Syntax
Output

Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

Cómo usar: SCSS to CSS Compiler

  1. Paste your SCSS — or switch to the indented Sass syntax.
  2. The CSS compiles as you type; errors show the line and column.
  3. Choose expanded or minified output and copy or download the CSS.

What the compiler handles

This is Dart Sass, the reference implementation of Sass, running in your browser. Everything in the language works: variables, nesting with &, mixins and @include, @extend, functions, maps, loops, @if conditions, and the module system with @use for the built-in modules such as sass:math and sass:color.

SCSS vs indented Sass

SCSS is a superset of CSS with braces and semicolons — any valid CSS is valid SCSS. The older indented syntax (.sass files) uses indentation instead of braces and newlines instead of semicolons. Both compile to the same CSS; pick the one your files use.

Imports of other files

A browser can’t read the other files in your project, so @use "variables" or @import "mixins" of your own partials won’t resolve here. Paste the partials’ content above the code that uses them. Deprecation warnings from Sass — for example for darken() — are shown under the output with the suggested replacement.

Private by design

Compilation runs entirely in your browser — your code is never uploaded, so it’s safe for proprietary projects.

También se busca como: scss to css, sass to css, scss compiler, sass compiler online, convert scss to css, compile sass online, scss converter.

Herramientas que combinan con: SCSS to CSS Compiler

  • LESS to CSS Compiler — Paste Less code and get plain CSS, compiled by the official Less.js engine in your browser — handy for maintaining Bootstrap 3 themes and older projects.
  • CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
  • CSS Minifier — Paste a stylesheet to shrink it instantly.
  • CSS to Tailwind Converter — Paste CSS rules or declarations and get the equivalent Tailwind utility classes for each selector — including hover: states and arbitrary values like p-[13px].

Preguntas frecuentes

Is this the real Sass compiler?
Yes — Dart Sass, the official implementation, compiled to JavaScript. It produces the same CSS as the sass command line.
Can I convert CSS to SCSS?
Any CSS is already valid SCSS, so you can rename .css to .scss. Nesting and variables are added by hand as you refactor.
Why do I see deprecation warnings?
Sass is phasing out global functions such as darken() and @import. The warning shows the modern replacement, like color.adjust() and @use.
¿Puedo instalar SCSS to CSS Compiler como aplicación web y utilizarla sin conexión?
Sí. SCSS to CSS Compiler es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

Herramientas relacionadas