Saltar al contenido
Numio

Convertir Sass a CSS — Numio

Compila la sintaxis indentada de Sass (.sass, sin llaves ni punto y coma) a CSS plano con Dart Sass y después ejecuta Autoprefixer para los navegadores de destino que elijas. Las variables, los mixins (=name / +name) y el anidamiento se resuelven en reglas CSS planas.

Comprobar a qué compila un archivo .sass con sintaxis indentada de un proyecto antiguo de Rails o de estilo Bulma sin montar una cadena de herramientas de Sass.

Sass

CSS

Cuándo usarla

  • Comprobar a qué compila un archivo .sass con sintaxis indentada de un proyecto antiguo de Rails o de estilo Bulma sin montar una cadena de herramientas de Sass.
  • Obtener CSS plano de un fragmento .sass para pegarlo en un CMS, una plantilla de correo o un codepen que no acepta Sass.

Cómo usarla

  1. Pega Sass en el editor Sass o suelta un archivo .sass sobre él.
  2. Abre Configuración para elegir los destinos de Autoprefixer: defaults, not ie < 11, last 2 versions, iOS 7, last 3 iOS versions. Al principio solo está activado "defaults".
  3. Copia el resultado del panel CSS; es CSS plano que puedes guardar directamente como archivo .css.

Entrada Sass

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #0b63f3;
}

Detalles y limitaciones

La compilación se hace en el servidor: la página envía tu código a /api/sass-to-css, que llama a compileString de Dart Sass con la sintaxis indentada. Después, Autoprefixer y el formateo con Prettier se ejecutan en un Web Worker en tu navegador.

Cada entrada se compila como un único archivo independiente. Un @use o @import de tus propios parciales falla con "Can't find stylesheet to import"; los módulos integrados como @use "sass:math" funcionan.

Los prefijos de proveedor dependen de los destinos seleccionados. En el ejemplo, user-select recibe los prefijos -webkit- y -moz- con la consulta "defaults".

Si la entrada no produce CSS (solo variables, mixins o funciones), el resultado es un único comentario CSS que indica que no se generó CSS, en lugar de un error.

FAQ

¿Qué diferencia hay aquí entre Sass y SCSS?

Esta página espera la sintaxis indentada: anidamiento por sangría, sin llaves ni punto y coma, y las abreviaturas =mixin y +include. Para código con llaves usa la página SCSS a CSS; ambas llaman a la misma API con un indicador de sintaxis distinto.

¿Puedo importar parciales como _variables.sass?

No. El servidor compila solo el texto que pegas, sin sistema de archivos ni rutas de carga, así que los imports de tus propios archivos fallan. En su lugar, pega el contenido del parcial encima del código que lo usa.

¿Qué pasa si mi archivo solo contiene variables o mixins?

Sass no emite CSS para declaraciones que nunca se usan, así que la página muestra el comentario /* No CSS generated: ... */. Añade una regla que use las variables o incluya el mixin para obtener salida.

¿La salida está minificada?

No. El CSS se genera expandido y formateado con Prettier. Los selectores anidados como &:hover se escriben como reglas separadas, por ejemplo .button:hover.

Especificaciones y referencias