Saltar al contenido
Numio

Convertir SCSS a CSS — Numio

Compila SCSS (.scss, sintaxis con llaves) a CSS plano con Dart Sass y después añade prefijos de proveedor con Autoprefixer. Las variables, @mixin/@include, el anidamiento y los módulos integrados como sass:math se resuelven en reglas CSS planas.

Obtener el CSS compilado de un fragmento .scss (por ejemplo, un componente de estilo Bootstrap) para pegarlo en un proyecto sin paso de compilación de Sass.

Scss

CSS

Cuándo usarla

  • Obtener el CSS compilado de un fragmento .scss (por ejemplo, un componente de estilo Bootstrap) para pegarlo en un proyecto sin paso de compilación de Sass.
  • Depurar cómo se expanden el anidamiento, los selectores con & y las funciones de color como darken() antes de confirmar cambios en SCSS.

Cómo usarla

  1. Pega SCSS en el editor Scss o suelta un archivo .scss 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 SCSS

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #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 scss. 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.

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

¿Admite @use "sass:math" y otros módulos integrados?

Sí. Los módulos integrados como sass:math, sass:color y sass:map están disponibles porque el código se compila con Dart Sass. Solo fallan los imports de tus propios archivos, ya que únicamente se envía el texto pegado.

¿Se envía mi SCSS a un servidor?

Sí. La página envía el código a su endpoint /api/sass-to-css para compilarlo. Después, la adición de prefijos y el formateo se hacen en tu navegador. Evita pegar código que no tengas permiso para compartir.

¿Puedo usarlo con la sintaxis indentada .sass?

No, esta página compila con la sintaxis SCSS, así que el código basado en sangría no se puede parsear. Usa la página Sass a CSS, que envía el indicador de sintaxis indentada a la misma API.

¿Cómo obtengo prefijos de proveedor para navegadores antiguos?

Abre Configuración y activa destinos como "last 2 versions" o "not ie < 11". Las consultas seleccionadas se pasan a Autoprefixer como su lista de navegadores.

Especificaciones y referencias