Compilador de SCSS a CSS

Este Compilador de SCSS a CSS convierte la sintaxis Sass SCSS en CSS estándar directamente en el navegador. Está diseñado para desarrolladores frontend, diseñadores, estudiantes y equipos de contenido que necesitan una forma rápida de probar variables, anidamientos, mixins, bucles y formatos de salida sin tener que abrir un pipeline de construcción completo.

Cómo usar

1. Pegar el código SCSS: Pega tu código fuente SCSS en el editor o carga uno de los ejemplos de inicio rápido.
2. Elegir las opciones de salida: Selecciona la sintaxis SCSS o Sass y elige el estilo de salida CSS que deseas.
3. Compilar SCSS: Haz clic en Compilar SCSS para ejecutar el compilador Sass en tu navegador.
4. Previsualizar el CSS: Revisa el CSS generado, las métricas, las advertencias y la vista previa en vivo antes de usar el resultado.
5. Copiar o descargar: Copia el CSS compilado a tu portapapeles o descárgalo como un archivo .css.

Qué soporta este compilador

• Sintaxis SCSS con llaves y puntos y comas, además de la sintaxis opcional indentada de Sass.
• Variables, selectores anidados, selectores padre, mixins, includes, bucles, mapas y funciones comunes de Sass.
• Estilos de salida CSS expandidos, anidados, compactos y comprimidos para diferentes necesidades de revisión y entrega.
• Un marco de vista previa aislado (sandbox) para que puedas inspeccionar el resultado visual sin afectar la página de MiniWebtool.

SCSS frente a CSS

CSS es el lenguaje de hojas de estilo que los navegadores entienden. SCSS es una sintaxis de Sass que añade características de creación como variables, anidamiento, mixins, bucles, mapas y archivos parciales reutilizables. Antes de que un navegador pueda usar SCSS, este debe compilarse en CSS plano.

Limitaciones

La compilación en el navegador es ideal para comprobaciones rápidas, pero no puede leer automáticamente archivos de proyectos privados desde tu sistema de archivos local. Pega los archivos parciales dentro del editor cuando pruebes importaciones. Para lanzamientos de producción, ejecuta tu pipeline de construcción normal para obtener mapas de fuentes, autoprefijos, minificación, integración de frameworks y compatibilidad total con Dart Sass.

Preguntas frecuentes

¿Qué hace un compilador de SCSS a CSS?

Un compilador de SCSS a CSS convierte la sintaxis Sass SCSS, como variables, anidamientos, mixins, bucles y archivos parciales, en CSS estándar que los navegadores pueden leer.

¿Esta herramienta compila SCSS en el navegador?

Sí. El código fuente SCSS se compila en tu navegador con un motor Sass de JavaScript, por lo que el uso normal no requiere enviar tu hoja de estilo a los servidores de MiniWebtool.

¿Puede compilar la sintaxis indentada de Sass?

Sí. Cambia la opción de sintaxis de SCSS a Sass cuando pegues código Sass indentado. SCSS sigue siendo la opción predeterminada porque es la sintaxis más común para proyectos web.

¿Por qué falló una declaración @import o @use?

Los compiladores del navegador no pueden leer automáticamente archivos de proyectos privados. Pega los archivos parciales importados en el editor o compila dentro de tu sistema de construcción cuando tu hoja de estilo dependa de rutas de archivos locales.

¿El CSS compilado está listo para producción?

El CSS generado es útil para pruebas rápidas, entregas, aprendizaje y pequeños fragmentos. Para una compilación de producción, te recomendamos seguir ejecutando el pipeline de tu proyecto para añadir autoprefijos, minificación, mapas de fuentes y procesamiento específico del framework.