Compilador de SCSS a CSS — Sass online

Qué puede compilar

Este es Dart Sass, la implementación de referencia de Sass, ejecutándose en tu navegador. Funciona todo el lenguaje: variables, anidamiento con &, mixins y @include, @extend, funciones, mapas, bucles, condiciones @if y el sistema de módulos con @use para los módulos integrados como sass:math y sass:color.

SCSS vs Sass indentado

SCSS es un superconjunto de CSS con llaves y punto y coma: cualquier CSS válido es SCSS válido. La sintaxis indentada más antigua (archivos .sass) usa sangría en lugar de llaves y saltos de línea en lugar de punto y coma. Ambas compilan al mismo CSS; elige la que usen tus archivos.

Importaciones de otros archivos

El navegador no puede leer los demás archivos de tu proyecto, así que @use "variables" o @import "mixins" de tus propios parciales no se resolverán aquí. Pega el contenido de los parciales encima del código que los usa. Las advertencias de obsolescencia de Sass, por ejemplo para darken(), se muestran debajo de la salida con el reemplazo sugerido.

Privado por diseño

La compilación se ejecuta completamente en tu navegador: tu código nunca se sube, así que es seguro para proyectos propietarios.

También se busca como: sass a css, compilador scss online, compilar sass online, convertir scss a css, compilador sass, conversor scss a css, scss compiler.

Herramientas que combinan con: SCSS a CSS

• LESS a CSS — Pega tu código Less y obtén CSS puro, compilado por el motor oficial Less.js directamente en tu navegador.
• Formateador de CSS — Convierte una hoja de estilos minificada en CSS legible, con una propiedad por línea y bloques @media correctamente anidados.
• Minificador CSS — Pega una hoja de estilos para reducirla al instante.
• CSS a Tailwind — Pega reglas o declaraciones CSS y obtén las clases utilitarias de Tailwind equivalentes para cada selector, incluidos los estados hover: y los valores arbitrarios como p-[13px].