Sass a CSS
Compila Sass y SCSS a CSS online. Conversión en tiempo real con salida expandida o comprimida, errores con número de línea y soporte completo de variables, mixins y anidado.
¿Cuál es la diferencia entre Sass y SCSS?
SCSS es la sintaxis más moderna, similar a CSS, que usa llaves y punto y coma. Sass (la sintaxis con sangría) usa indentación y saltos de línea. Esta herramienta compila ambas: elige la sintaxis en el desplegable.
¿Qué funciones de Sass están soportadas?
El compilador usa el motor oficial Dart Sass, así que están soportadas las variables, el anidado, los mixins, @include, las funciones, @use, @extend, directivas de control como @if y @each y el estilo de salida comprimido.
¿Cómo obtengo CSS comprimido?
Cambia el desplegable de estilo de salida a Comprimido antes de compilar. Se eliminan los espacios en blanco y el punto y coma final, produciendo la hoja de estilos más pequeña posible.
¿Por qué el error muestra un número de línea?
Cuando tu código tiene un error de sintaxis, el motor Sass informa de la línea y columna exactas donde falló el análisis, y la herramienta lo muestra sobre la salida para corregirlo rápido.
¿Mi código Sass se sube a un servidor?
No. El motor Dart Sass completo viene incluido en la página y compila localmente en tu navegador. Tus hojas de estilo nunca salen de tu dispositivo, así que es seguro incluso para proyectos privados.
¿Puedo compilar @import de archivos locales?
No. El compilador trabaja sobre un único fragmento en memoria y no accede a tu sistema de archivos, por lo que los @import basados en archivos y el @use de parciales externos no pueden resolverse.
¿Funciona sin conexión?
Sí. Una vez cargados la página y el paquete del compilador, la compilación ocurre íntegramente en tu máquina, sin conexión necesaria.
¿Cómo uso el resultado?
Copia el CSS compilado al portapapeles o descárgalo como style.css con los botones bajo la salida, y luego enlázalo en tu HTML o pégalo en la hoja de estilos de tu proyecto.
Cómo usar Sass a CSS
Este compilador ejecuta el motor oficial de Dart Sass por completo en tu navegador. Pega SCSS o Sass sangrado y obtén CSS limpio al instante: variables, mixins, anidamiento y funciones compatibles, y nada se sube.
- Pega tu Sass o SCSS en el cuadro de entrada, o pulsa Ejemplo para cargar una demo funcional con variables y un mixin.
- Elige la sintaxis (SCSS o Sass sangrado) y el estilo de salida (Expandido o Comprimido) en los menús desplegables.
- Con la Compilación en vivo activada, el CSS aparece mientras escribes; si no, pulsa Compilar para ejecutarlo manualmente.
- Si hay un error de sintaxis, el número de línea exacto y el mensaje aparecen sobre la salida para que lo corrijas rápido.
- Usa Copiar o Descargar bajo la salida para llevarte tu hoja de estilos compilada como style.css.
Elige el estilo de salida Comprimido para minificar tu hoja de estilos: ideal para builds de producción directos desde el código fuente.
Herramientas relacionadas
- Embellecedor CSS Formatea y embellece código CSS al instante. Convierte CSS minificado en código legible y bien indentado con opciones personalizables.
- Minificador CSS Minificador CSS online gratuito. Comprime y optimiza código CSS al instante eliminando espacios, comentarios y caracteres innecesarios. Reduce el tamaño para mejor rendimiento web.
- Generador de Gradientes CSS Crea impresionantes gradientes CSS visualmente. Genera gradientes lineales, radiales y cónicos con múltiples paradas de color, ángulos y posiciones. Copia código CSS listo para producción.
- Generador CSS Flexbox Generador visual CSS Flexbox con vista previa en vivo. Ajusta propiedades flex y obtén código CSS listo para usar.
- Calculadora Chmod Calculadora chmod online gratuita para visualizar y calcular permisos de archivos Linux con casillas. Convierte instantáneamente entre notación numérica (755, 644) y simbólica (rwxr-xr-x). Soporta permisos especiales como setuid, setgid, sticky bit.
- Tabla ASCII Referencia completa de codificación de caracteres ASCII con códigos decimales, hexadecimales, octales, binarios, entidades HTML y descripciones. Búsqueda y filtro instantáneos.
- Probador de Solicitudes HTTP Prueba APIs REST directamente en tu navegador. Envía solicitudes GET, POST, PUT, DELETE con headers, body y parámetros personalizados. Ve el estado, headers y cuerpo JSON al instante.
- Generador .htaccess Genere reglas .htaccess de Apache para redirecciones, reescrituras, cabeceras de seguridad, caché y más.