Convertir SCSS a CSS Online
Compila SCSS/Sass a CSS puro en tu navegador. Sin npm, sin Node.js, sin instalación.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Compilador SCSS a CSS
¿Por qué usar este compilador SCSS?
Sin configuración
Sin npm install, sin webpack, sin Vite. Pega tu SCSS y obtén CSS en segundos.
Dart Sass oficial
Usa el compilador oficial Dart Sass (WebAssembly). Compatibilidad total con el estándar moderno.
Privacidad total
Todo ocurre en tu navegador. Tu código no se envía a ningún servidor.
Mixins, variables, anidamiento
Soporte completo: $variables, &:selector, @mixin/@include, @extend y bucles.
Cómo funciona
Tres pasos, sin complicaciones
Escribe o pega tu código SCSS
Pega tu código SCSS o Sass en el editor. Variables, anidamiento, mixins, funciones y selectores de padre (&) son compatibles.
Compilación instantánea
El resultado en CSS puro aparece automáticamente en el panel derecho. El compilador trabaja localmente en tu navegador.
Copia o descarga el CSS
Copia el CSS generado al portapapeles o descárgalo como archivo .css listo para usar en producción.
Preguntas frecuentes
¿Tienes dudas?
Sass tiene dos sintaxis. La sintaxis original (extensión .sass, creada en 2006) usa indentación en lugar de llaves y punto y coma — es más compacta pero rompe la compatibilidad con CSS estándar. SCSS (Sassy CSS, extensión .scss) se introdujo en Sass 3.0 en 2010 con una sintaxis completamente compatible con CSS: cualquier CSS válido es SCSS válido. SCSS se convirtió rápidamente en el estándar de facto y es lo que la mayoría de los desarrolladores usan hoy. Esta herramienta soporta ambas sintaxis.
Las variables en SCSS se definen con el prefijo $ y pueden almacenar colores, tamaños, fuentes o cualquier valor CSS. Por ejemplo: $color-primario: #3498db; $fuente-base: 'Inter', sans-serif; $espaciado: 16px. Se usan directamente en las propiedades: color: $color-primario. A diferencia de las custom properties de CSS (--variable), las variables SCSS se resuelven en tiempo de compilación y no existen en el CSS resultante. Para acceso dinámico en tiempo de ejecución (con JavaScript), las custom properties de CSS son la herramienta adecuada.
La comunidad SCSS tiene una regla no escrita: no superar 3-4 niveles de anidamiento. El anidamiento profundo genera selectores CSS muy específicos (.componente .bloque .elemento .modificador) que son difíciles de sobrescribir y aumentan la especificidad innecesariamente. La metodología BEM (Block-Element-Modifier) combina bien con SCSS porque limita el anidamiento a 1-2 niveles mientras mantiene la estructura clara. El selector de padre & es útil para pseudo-clases (&:hover, &:focus) y modificadores (& .active) sin aumentar la profundidad semánticamente.
Sí. Los mixins son uno de los pilares de SCSS: se definen con @mixin nombre($parámetros) y se invocan con @include nombre(valores). Permiten reutilizar bloques de CSS con variaciones, algo que el CSS estándar solo logró parcialmente con custom properties y que ningún preprocessor alternativo maneja tan limpiamente. También se soportan @extend (herencia de selectores), @function (funciones personalizadas), @each, @for y @while (bucles), y @if/@else (condicionales).
Hay casos donde configurar un entorno Node.js no es práctico: explorar SCSS rápidamente sin crear un proyecto, trabajar en un equipo donde no tienes permisos para instalar paquetes, hacer una demostración en vivo, revisar el output CSS de un fragmento concreto, o simplemente aprender la sintaxis. Esta herramienta usa el compilador oficial de Dart Sass (la implementación de referencia actual desde que LibSass fue deprecado en octubre de 2020) compilado a WebAssembly, garantizando compatibilidad total con el estándar SCSS moderno.
LibSass fue la implementación de Sass en C/C++ utilizada por el paquete npm node-sass, que fue durante años la forma más popular de compilar SCSS en proyectos Node.js. El equipo de Sass deprecó LibSass en octubre de 2020 por no poder mantenerlo al ritmo de las nuevas especificaciones. Dart Sass (la implementación oficial escrita en Dart y publicada como JavaScript puro para npm como el paquete sass) es desde entonces la implementación de referencia. Si tienes proyectos con node-sass, se recomienda migrar al paquete sass, que es un reemplazo drop-in en la mayoría de los casos.
SCSS a CSS online: compila Sass sin npm ni Node.js en el navegador
Sass (Syntactically Awesome Style Sheets) es un lenguaje de preprocesamiento de CSS creado por Hampton Catlin y desarrollado por Natalie Weizenbaum (la principal autora durante la mayor parte de su historia) y Chris Eppstein. La primera versión fue lanzada en noviembre de 2006 como parte del framework Haml para Ruby. La sintaxis original usaba indentación en lugar de llaves, inspirada en Python y YAML, lo que la hacía más compacta pero incompatible con CSS existente. Esta barrera de adopción fue el catalizador para la creación de SCSS (Sassy CSS), introducida en Sass 3.0 en octubre de 2010: una nueva sintaxis completamente compatible con CSS3 donde cualquier archivo CSS válido es también SCSS válido. Las características centrales de SCSS — variables con el prefijo $, anidamiento de selectores, el selector de padre & para pseudo-clases y variantes, directivas @mixin e @include para reutilización de código, y @extend para herencia — resolvieron los problemas de mantenibilidad del CSS puro a gran escala que la industria llevaba años enfrentando.
El ecosistema de preprocesadores CSS vivió su apogeo entre 2012 y 2018. LESS (creado por Alexis Sellier en 2009) fue el primer competidor serio de Sass, con una sintaxis que usaba @ en lugar de $ para las variables y que fue adoptada masivamente gracias a Bootstrap 3 (2013). Stylus (creado por TJ Holowaychuk en 2010) ofreció una sintaxis aún más flexible pero con menor adopción. SCSS ganó la batalla del ecosistema en parte por la adopción en Bootstrap 4 (2018, que migró de LESS a SCSS), en parte por la integración en frameworks como Compass (Chris Eppstein, 2009) que añadió funciones avanzadas y sprites automáticos, y en parte por ser el estándar en Angular (que genera proyectos con SCSS por defecto). Las implementaciones de Sass han evolucionado significativamente: Ruby Sass (2006-2019, la implementación original, ahora sin mantenimiento), LibSass (implementación en C/C++, usada por node-sass, deprecada en octubre de 2020), y Dart Sass (la implementación de referencia actual, publicada en 2016 y disponible como paquete npm sass desde 2018).
La necesidad de un compilador SCSS online surge en contextos muy concretos del flujo de trabajo de desarrollo frontend. El más frecuente es la exploración rápida: un desarrollador quiere probar cómo se compila un mixin específico, verificar que una función de color funciona como espera, o entender el output CSS de un patrón de anidamiento concreto sin crear un proyecto nuevo. La alternativa más cercana es el Sass Playground oficial (sass-lang.com/playground), pero su interfaz es minimalista y no ofrece funcionalidades adicionales como copia rápida o descarga. Otro caso es el trabajo en entornos sin permisos de instalación: máquinas corporativas con restricciones en npm, entornos de CI/CD de solo lectura, o sesiones de formación donde no se puede garantizar que todos los asistentes tengan Node.js configurado. El compilador de Convertir.ai utiliza Dart Sass compilado a WebAssembly, que se ejecuta completamente en tu navegador a velocidades comparables al compilador nativo, sin enviar ninguna línea de código a servidores externos. Esto lo hace seguro para compilar hojas de estilo de proyectos en producción o con código propietario.