SCSS a CSS Convertidor
Convertir código SCSS/SASS a CSS
SCSS de entrada
CSS compilado
Ejemplos SCSS a CSS
Las variables y anidación de SCSS se compilan a CSS plano. Ejemplo:
Variables y selectores anidados
SCSS de entrada:
CSS compilado:
Usa Ejemplo de arriba para cargar más datos de ejemplo.
¿Qué es SCSS a CSS?
SCSS (Sassy CSS) es un preprocesador CSS que añade variables, anidación, mixins y más. Los navegadores no ejecutan SCSS—necesitan CSS plano. Esta herramienta compila tu SCSS (o SASS) a CSS listo para navegador. La documentación Sass define la sintaxis.
La compilación se ejecuta completamente en tu navegador. No se envía nada a ningún servidor. La salida es CSS estándar. Para el reverso (CSS a SCSS), usa CSS a SCSS. Para Less, Less a CSS.
Cómo usar esta herramienta
Pegar o subir SCSS
Copia tu SCSS o SASS y pégalo en el editor izquierdo. También puedes hacer clic en Subir para cargar un archivo .scss o .sass. El botón Ejemplo carga datos de ejemplo. El SCSS inválido mostrará un error.
Ver el CSS compilado
El panel derecho muestra el CSS compilado. Las variables se resuelven, la anidación se aplana y los mixins se expanden. La salida es CSS plano que cualquier navegador puede usar.
Copiar o descargar
Usa Copiar o Descargar. Para formatear la salida, el Formateador CSS. Para minificar, el Minificador CSS.
Cuándo ayuda SCSS a CSS
Cuando tienes SCSS de un proyecto, sistema de diseño o codebase legacy pero necesitas CSS plano—para una prueba rápida, plantilla de email o sistema sin herramientas de build—esta compilación ayuda. Frameworks como Bootstrap y Foundation usan SCSS. Para builds de producción, Dart Sass y webpack compilan SCSS. También útil para depurar: ver exactamente qué CSS produce tu SCSS.
Muchos frameworks (Bootstrap, Foundation) usan SCSS. Si personalizas variables o extraes estilos, compilar aquí te da el CSS final. Para convertir CSS existente a estructura SCSS, usa CSS a SCSS.
Preguntas frecuentes
¿SCSS vs SASS?
SCSS usa llaves como CSS. SASS usa indentación (sin llaves). Ambos compilan al mismo CSS. Esta herramienta soporta ambas sintaxis.
¿Soporta @import?
Los imports parciales pueden no resolverse si los archivos no se suben. Para proyectos multiarchivo, usa una herramienta de build como Dart Sass o tu bundler. Ver Sass CLI.
¿Mis datos son privados?
Sí. La compilación se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor.
¿Qué pasa con mixins y funciones?
Los mixins y funciones se expanden durante la compilación. El CSS de salida contiene los valores resueltos. Las funciones complejas se soportan dentro de las capacidades del compilador.
¿Puedo usar con Bootstrap?
El SCSS de Bootstrap tiene muchos parciales y variables. Para compilación completa de Bootstrap, usa el build oficial o npm. Esta herramienta funciona para SCSS de un solo archivo o snippets.
Herramientas relacionadas
Para Sass/SCSS: sass-lang.com y documentación Sass. MDN CSS y W3C CSS definen el formato de salida.