Guía de uso
Con esta herramienta puedes convertir SCSS a CSS plano, el único que entienden los navegadores, sin instalar nada. Sustituye las variables, deshace la anidación, expande los mixins (también con @content), combina las media queries anidadas y calcula funciones de color como darken o rgba. Si encuentra algo que no admite, se detiene con un error claro y el número de línea en vez de generar CSS incorrecto.
Cómo convertir SCSS a CSS
- Pega tu SCSS. Si usa variables o mixins definidos en otros archivos, pega también esas definiciones al principio.
- Compila con el botón de ejecutar o con Ctrl + Enter.
- Si aparece un error, ajusta la línea indicada siguiendo las indicaciones de más abajo.
- Copia el CSS resultante o descárgalo como archivo de texto.
Ejemplo: un botón con mixin responsive
Definimos $primario: #8f39e8; y un mixin tablet que envuelve su @content en @media (min-width: 768px). Después, el bloque .boton declara color: #fff y background: $primario, añade un &:hover con darken($primario, 10%) e incluye @include tablet { padding: 12px 24px; }. El resultado son tres bloques:
.boton { color: #fff; background: #8f39e8; }.boton:hover { background: #7519d5; }@media (min-width: 768px) { .boton { padding: 12px 24px; } }
Fíjate en el tercero: el contenido del mixin acaba dentro de la media query, pero con el selector correcto. Dos media queries anidadas se combinan en una sola, por ejemplo screen and (min-width: 600px).
Qué admite y qué no
| Característica | Soporte |
|---|---|
Variables, !default, !global y ámbitos | Sí |
Anidación con &, &:hover, &__elemento e interpolación #{} | Sí |
@mixin e @include con argumentos por defecto, con nombre y @content | Sí |
@media anidada, @supports, @keyframes, @font-face | Sí |
Propiedades anidadas y selectores %placeholder | Sí; los placeholders no aparecen en la salida |
Aritmética con +, - y * | Sí, con unidades compatibles |
darken, lighten, rgba, mix, transparentize, opacify | Sí |
@if, @each, @for, @while, @function | No: error explícito |
@extend, @use e @import de archivos Sass | No: error explícito |
Los comentarios de línea (//) se eliminan y los de bloque se conservan. Los @import de CSS puro, con url() o un archivo .css, pasan sin cambios.
Errores frecuentes y cómo resolverlos
Undefined variable: $marca (line 2): la variable está definida en otro archivo. Pega su definición al principio.@import of Sass files is not supported here: la herramienta no accede a tus archivos; pega directamente el contenido importado.@each is not supported by this converter: despliega el bucle a mano, una regla por elemento.@extend is not supported by this converter: pasa los estilos compartidos a un mixin y usa@include.Undefined mixin: boton: falta la definición del mixin, o se usa antes de definirse.
Detenerse con un mensaje claro es intencionado: un CSS incompleto que compila sin quejarse solo traslada el problema al navegador.
Unidades y operaciones
$gap * 3 con $gap: 4px da 12px. Las unidades distintas no se combinan: 10px + 2em se queda tal cual y el navegador lo descartará, así que usa calc(); por ejemplo, calc(100% - #{8px * 2}) se compila como calc(100% - 16px). La división con / no se calcula a propósito, para no romper abreviaturas como font: 16px/1.5.
Cuándo usarla y privacidad
Es útil para ver qué CSS genera un fragmento, hacer un arreglo rápido en un equipo sin entorno de compilación, llevar un trozo de SCSS antiguo a un campo de CMS que solo admite CSS o comprobar resultados mientras aprendes Sass. Para compilar proyectos grandes en producción, sigue usando el compilador oficial de Sass. La compilación se ejecuta con JavaScript en tu navegador; el código no se envía al servidor y la página solo suma un contador de uso anónimo. Para el camino inverso tienes convertir CSS a SCSS, y para ordenar el resultado, formatear CSS. El resto de utilidades está en herramientas para desarrolladores.