Compilar SCSS a CSS en línea — Compilador Dart Sass en el navegador
Compila un fragmento SCSS o agrupa una carpeta de proyecto local con resolución nativa de @use y @import. Estilo de salida, source maps de un solo archivo y avisos de deprecación configurables — no se envía nada.
Notas para desarrolladores
• El editor de un solo archivo usa sintaxis SCSS; los bundles de proyecto también aceptan archivos .sass con indentación. • Arrastra una carpeta de proyecto para resolver rutas locales de @import / @use. node_modules, paquetes y URL remotas no se resuelven. • La autocompilación se ejecuta al pegar y al cargar un ejemplo; las ediciones escritas requieren Compilar (⌘↵). • Las source maps son inline en archivos individuales y no están disponibles en el modo bundle v1. • Combínalo con beautify-scss o minify-css para el flujo completo.
Agrupar partials locales
Elige Agrupar proyecto, arrastra una carpeta y selecciona un archivo de entrada. FastMinify preserva las rutas relativas y deja que Dart Sass descubra partials .scss y .sass alcanzables mediante @use o @import. El bundle local en el navegador está limitado a 32 MiB por archivo y 32 MiB en total. La versión 1 admite una sola entrada, sin source maps ni resolución de paquetes node_modules.
Opciones
Cuándo los equipos eligen esta opción
• Convertir un fragmento SCSS de la documentación de un design system a CSS plano. • Previsualizar la salida compressed antes de pegarla en un CMS. • Enseñar variables y anidamiento SCSS con retroalimentación CSS instantánea. • Prototipar mixins sin instalar Dart Sass en local.
Ejemplos comentados
Variables y anidamiento
Entrada SCSS
CSS compilado
Mixin con parámetros
Entrada SCSS
CSS compilado
Herramientas relacionadas
Embellece SCSS con embellecer SCSS, desminifica con desminificar SCSS, o explora el hub de preprocesadores CSS.
FAQ del compilador SCSS
Compilación solo en el navegador
¿Por qué no puedo usar @import para bibliotecas externas?
Los bundles de proyecto resuelven los archivos locales que arrastras al navegador. Las rutas a node_modules, paquetes, CDN o archivos fuera de la carpeta arrastrada no están disponibles.
¿Admite la sintaxis SASS con indentación?
El editor de un solo archivo usa sintaxis SCSS con llaves. El modo bundle de proyecto también acepta archivos .sass y los carga con sintaxis indentada.
¿Cuándo se ejecuta la compilación automáticamente?
Al pegar y al cargar un ejemplo. Mientras escribes, usa el botón Compilar o ⌘↵ — la compilación en vivo en cada pulsación está desactivada intencionalmente.
¿Un bundle de proyecto es lo mismo que concatenar archivos?
No. Dart Sass parte de un archivo de entrada y resuelve solo las dependencias @use y @import que alcanza. El orden de los archivos no se concatena manualmente. El modo bundle v1 está limitado a una entrada, 32 MiB en total, sin source maps ni importaciones de paquetes npm.
Preprocesadores CSS
Compila SCSS o LESS a CSS estándar en el navegador — combínalo con embellecer o minificar para un flujo de hoja de estilos completo.
Explorar otras categorías de herramientas
Minificar
Reduce código y assets para producción — minifica JavaScript, CSS, HTML, JSON y XML antes de gzip o un despliegue CDN.
Embellecer
Haz el código legible con una indentación coherente — embellece JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML y más en tu navegador.
Desminificar
Expande código minificado o comprimido — desminifica JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML y otros formatos al depurar o revisar.
Conversión
Transforma datos entre JSON, YAML, XML y CSV en local — sin subidas a un servidor.
Herramientas JSON
Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.
Herramientas SVG
Previsualiza, optimiza con SVGO, exporta Data URI, redimensiona, embellece, convierte a JSX y valida SVG — todo en tu navegador.
DevOps e Infra
Formato, validación y minificación de Terraform HCL, formato y lint de Dockerfile, validación de Docker Compose y .env.
CI/CD
GitHub Actions y GitLab CI — formatear YAML y comprobar la estructura de workflows/jobs en el navegador.
Logs y observabilidad
JSON/NDJSON línea a línea y access logs de Nginx/Apache — formato, filtro, validación y CSV/TSV.
Kubernetes
Manifiestos multi-doc, validación estructural, starters Ingress/Deployment y formato de values de Helm.
Red / IP
CIDR, subredes y ayudas IPv4/IPv6 — en tu navegador.
Seguridad y tokens
JWKS, certificados X.509 y escaneo de secretos — en local en el navegador.
API y esquemas
Herramientas OpenAPI para formatear, validar y analizar tus specs.
Codificación
Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.
Utilidades para desarrolladores
Timestamps, UUID, ULID, Nanoid, cron, contraseñas, regex, slugify, bases numéricas, mayúsculas, diff de texto y chmod — todo en el cliente.
Texto y Markdown
Cuenta palabras, genera TOC Markdown y limpia listas de líneas — todo en tu navegador.
IA y LLM
Conteo de tokens, estimación de costes y ajuste a la ventana de contexto — 100 % en el navegador.
Datos de prueba
Valores de campo sintéticos para fixtures y seed de BD — primero números de teléfono en rangos reservados.
Serialización
Serializa y deserializa estructuras PHP junto a los flujos JSON.