Convertir Sass (Indentado) a CSS Online
Compila sintaxis Sass indentada (.sass) a CSS puro. Gratis, en tu navegador, sin instalar Ruby, Dart ni Node.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Casos de uso
Sass indentado a CSS sin instalar nada
Herencia Ruby Sass
Compila archivos .sass de proyectos legacy que usaban Ruby Sass, sin necesidad de instalarlo.
Sin dependencias
No necesitas Ruby, Dart, Node.js ni npm. Funciona directamente en el navegador.
Aprendizaje de Sass
Prueba la sintaxis indentada original de Sass y ve el CSS generado al instante.
100% privado
Tu código Sass nunca se envía a ningún servidor. La compilación ocurre en tu navegador.
Cómo funciona
Tres pasos, sin complicaciones
Pega o sube tu archivo .sass
Arrastra tu archivo .sass o pega el código con sintaxis indentada (sin llaves ni punto y coma). No se admiten archivos .scss.
Compilación instantánea
El compilador Sass procesa tu código en el navegador y genera CSS válido al instante. Los errores de sintaxis se muestran con número de línea.
Copia o descarga el CSS
Copia el CSS resultante al portapapeles o descárgalo como archivo .css listo para usar en cualquier proyecto web.
Preguntas frecuentes
¿Tienes dudas?
Son dos sintaxis diferentes del mismo preprocesador Sass. La sintaxis .sass (también llamada 'sintaxis indentada' o 'Sass original') fue creada por Hampton Catlin en 2006 y usa indentación para definir la jerarquía de reglas, sin llaves ({}) ni punto y coma (;), similar a la sintaxis de Python o CoffeeScript. La sintaxis .scss (Sassy CSS) fue introducida en Sass 3 en mayo de 2010 y usa la misma estructura de llaves y punto y coma que CSS estándar, lo que la hace compatible con CSS existente y más fácil de adoptar para desarrolladores familiarizados con CSS. Esta herramienta compila exclusivamente la sintaxis .sass indentada. Para .scss, usa la herramienta scss-to-css.
Hampton Catlin diseñó Sass en 2006 mientras trabajaba como desarrollador web, influenciado por su experiencia con Haml (otro preprocesador que él mismo creó para simplificar HTML). La filosofía era que el código de estilos debería ser más limpio y menos verboso que CSS: eliminar las llaves y el punto y coma reducía el ruido visual y obligaba a una indentación consistente que mejoraba la legibilidad. La primera implementación de Sass fue en Ruby, como parte del framework Haml para Ruby on Rails. Durante varios años, Sass fue sinónimo de la sintaxis indentada y requería Ruby instalado para compilar.
La sintaxis .sass soporta todas las características de Sass: variables ($color: #333), anidamiento de selectores, mixins (@mixin y @include), herencia con @extend, funciones con @function, operaciones matemáticas, importaciones con @use y @forward (el sistema de módulos moderno de Dart Sass, introducido en Dart Sass 1.23 en octubre de 2019 como reemplazo de @import), directivas de control de flujo (@if, @each, @for, @while), interpolación con #{}, y el operador parent selector &. La única diferencia con .scss es sintáctica: indentación en lugar de llaves y sin punto y coma.
Existen varios escenarios donde no quieres o no puedes instalar un compilador Sass en tu entorno: al trabajar en un ordenador compartido o sin permisos de instalación, en entornos de CI/CD restringidos, al editar rápidamente un archivo .sass heredado de un proyecto legacy que usaba Ruby Sass (que llegó a su fin de vida el 26 de marzo de 2019), al aprender Sass sin configurar un entorno de desarrollo completo, o al necesitar una comprobación rápida del CSS generado por un fragmento Sass concreto. Convertir.ai ejecuta un compilador Sass compilado a WebAssembly directamente en tu navegador, sin ninguna dependencia de servidor.
La herramienta compila la sintaxis indentada (.sass) que es compatible con Dart Sass (la implementación de referencia oficial desde 2019, cuando Ruby Sass alcanzó su fin de vida el 26 de marzo de 2019 y LibSass fue deprecado en octubre de 2020). La gran mayoría del código .sass escrito para Ruby Sass es compatible con Dart Sass, con la excepción del sistema de módulos: @import fue deprecado en Dart Sass y reemplazado por @use y @forward. Si tu código .sass usa @import extensivamente, el CSS resultante puede incluir advertencias de deprecación, pero la compilación seguirá funcionando.
La sintaxis indentada tiene defensores que argumentan que produce código más limpio y fácil de leer: la ausencia de llaves y punto y coma reduce el número de caracteres, la indentación obligatoria mejora la consistencia del código, y la sintaxis es más similar a lenguajes modernos como Python, CoffeeScript o Pug. Sin embargo, la adopción de .scss es abrumadoramente mayoritaria en la industria: los frameworks CSS modernos (Bootstrap 5, Foundation, Tailwind con su capa Sass) usan .scss, los entornos de desarrollo típicos (webpack, Vite, Parcel) configuran sass-loader o el plugin de Vite para .scss por defecto, y la mayoría de los desarrolladores están más familiarizados con la sintaxis de llaves de CSS. Para proyectos nuevos, .scss suele ser la elección más pragmática por la mayor disponibilidad de herramientas, snippets y soporte de IDEs.
Compilar Sass a CSS: sintaxis indentada .sass, herencia de Ruby Sass y diferencias con .scss
Sass (Syntactically Awesome Style Sheets) fue creado por Hampton Catlin en 2006, con la primera implementación desarrollada por Nathan Weizenbaum en Ruby. La sintaxis original de Sass, conocida como 'sintaxis indentada' o simplemente 'Sass' (con extensión .sass), está inspirada en la filosofía de Haml — otro preprocesador creado por Catlin para simplificar HTML en aplicaciones Ruby on Rails. La sintaxis indentada elimina dos elementos de CSS que Catlin consideraba ruido visual innecesario: las llaves ({}) que delimitan bloques de declaraciones, y el punto y coma (;) que separa declaraciones individuales. En su lugar, la jerarquía se define mediante indentación, similar a Python, CoffeeScript o las versiones modernas de Pug (anteriormente Jade). Esta decisión de diseño hace que el código .sass sea notablemente más compacto: un bloque de CSS que requiere 6 caracteres de sintaxis (llave de apertura, salto de línea, punto y coma, salto de línea, llave de cierre) se reduce a solo la indentación. La primera versión pública de Sass fue lanzada en noviembre de 2006 como parte del framework Haml para Ruby on Rails, y durante los primeros años de su existencia, compilar Sass requería tener Ruby instalado.
En mayo de 2010, Sass 3 introdujo la sintaxis SCSS (Sassy CSS, con extensión .scss), diseñada para ser un superconjunto de CSS: cualquier archivo CSS válido es también un archivo SCSS válido. Esta decisión estratégica aceleró masivamente la adopción de Sass en la industria, ya que los desarrolladores podían migrar proyectos CSS existentes a SCSS simplemente renombrando el archivo. Bootstrap adoptó Sass (en su variante SCSS) en Bootstrap 3.0 en agosto de 2013, lo que consolidó SCSS como el estándar de facto para preprocesadores CSS. Dart Sass, la implementación de referencia actual de Sass, fue lanzada por Natalie Weizenbaum (quien también desarrolló la implementación Ruby original) y el equipo de Google como la implementación principal en noviembre de 2016. Ruby Sass alcanzó su fin de vida el 26 de marzo de 2019, y LibSass (la implementación en C++, más rápida, usada por node-sass) fue oficialmente deprecado en octubre de 2020. Desde entonces, Dart Sass es la única implementación activamente mantenida. Dart Sass soporta completamente la sintaxis indentada .sass, además de SCSS.
La necesidad de compilar la sintaxis .sass sin instalar Ruby, Dart ni Node surge en varios contextos prácticos. El más frecuente es el mantenimiento de proyectos legacy: miles de proyectos web desarrollados entre 2006 y 2014 usan la sintaxis .sass con Ruby Sass, y cuando un desarrollador necesita modificar los estilos de uno de estos proyectos sin configurar el entorno de desarrollo original (que puede requerir una versión específica de Ruby, la gema Sass en una versión determinada, y potencialmente Bundler con un Gemfile específico), disponer de un compilador online es la solución más rápida. Otro contexto es la educación: la sintaxis indentada de Sass es frecuentemente enseñada en cursos de desarrollo web como ejemplo de preprocesadores CSS porque muestra de forma clara el concepto de anidamiento y herencia de selectores; los estudiantes que aprenden Sass en un entorno educativo restringido (un chromebook, un laboratorio informático, un entorno sandboxed) no pueden instalar compiladores locales. Finalmente, la conversión de .sass a CSS es el primer paso para migrar proyectos que usan la sintaxis indentada a SCSS o a soluciones modernas basadas en PostCSS, CSS custom properties (variables nativas de CSS, soportadas en todos los navegadores modernos desde 2017) o CSS nesting (la especificación CSS Nesting, implementada en Chrome 112, Firefox 117 y Safari 16.5, que hace obsoleta gran parte de las funcionalidades de anidamiento de Sass para proyectos que solo necesitan soportar navegadores actuales).