Compilar SCSS y LESS a CSS en línea, sin instalar un build tool

Compila un fragmento SCSS o LESS (variables, mixins) a CSS en el navegador, sin npm run build — útil para una PR, un snippet o un entorno sin Node.

16.09.2026

13 min de lectura

Compartir este artículo:

SCSS

LESS

Preprocesador CSS

CSS

Tutorial

¿Por qué compilar SCSS o LESS fuera del proyecto?

Un comentario de pull request con doce líneas de SCSS, un snippet de Stack Overflow con un mixin paramétrico o un onboarding en un portátil sin Node: nada de eso justifica lanzar npm run build. FastMinify no sustituye Dart Sass en CI, sass-loader ni el pipeline CSS de Vite. El compilador SCSS a CSS ejecuta Dart Sass en la pestaña; el compilador LESS a CSS ejecuta less.js del mismo modo. Pega un fragmento o suelta una carpeta local de parciales y lee CSS estándar — no se sube nada. El clúster vive en el hub de preprocesadores CSS. Tras compilar, encadena el minificador CSS en línea cuando de verdad necesites CSS más pequeño, no solo salida expanded.

Dart Sass (SCSS) y less.js (LESS) se ejecutan por completo en el navegador — sin ida y vuelta al servidor

Variables, anidación, mixins y módulos integrados como sass:color compilan como en la CLI local

Los bundles de carpeta de proyecto resuelven parciales @use / @import locales sin concatenar a mano

Estilo de salida expanded o compressed (SCSS); interruptor compress (LESS); source maps inline opcionales en archivo único

Límites honestos: sin node_modules, sin imports CDN, sin source maps en modo bundle

Encadena con beautify / unminify SCSS o LESS y luego minify CSS para el resto del pipeline

Cuándo compilar en el navegador y cuándo no

Buenos encajes

El compilador es un bisturí, no la fábrica de producción.

Revisar un mixin o un token en una PR sin clonar el repo

Convertir un ejemplo de design system a CSS que un CMS o una plantilla de email puedan pegar

Enseñar variables, anidación y mixins con feedback CSS inmediato

Comparar compressed vs expanded antes de cambiar una opción de build

Compilar una carpeta autónoma de parciales que puedas soltar (sin npm)

Déjaselo al build

Si la respuesta depende de paquetes, alias o del grafo completo de la aplicación, quédate en CI.

Hojas que @use paquetes npm o un load path de monorepo

Sustituir Vite/webpack como único pipeline CSS de una app

Tomar la salida compressed de Sass como sustituto de CSSO / cssnano

Activar JavaScript inline de LESS sobre código que no has escrito

Esperar source maps de un bundle de proyecto soltado (la v1 no las emite)

Los errores de compilación que te comen una tarde entera

Arrancar la app para compilar doce líneas

Un token de design system, un mixin puntual o un comentario de revisión no necesitan Vite, webpack ni una imagen Docker de Node. El coste es esperar el install, la caché y todo el grafo CSS cuando solo querías ver en qué se convierte $spacing * 2.

Lanzar el build de producción solo para comprobar un selector anidado

Pedir a un compañero que haga pull y yarn para leer el CSS compilado en una PR

Saltar la revisión porque Sass no está instalado en la máquina del revisor

Pegar SCSS crudo en un campo CMS que solo acepta CSS

Pega el fragmento en el compilador del navegador, lee el CSS y pega ese CSS (o una variante compressed) donde el host espera CSS — no SCSS.

Esperar que @use "bootstrap" se resuelva desde npm

La sintaxis de módulos de Dart Sass funciona. Lo que no funciona en el navegador es resolver paquetes. FastMinify nunca lee el disco fuera de la carpeta que sueltas y no busca node_modules, GitHub ni un CDN.

Escribir @use "bootstrap" o @import "~bootstrap" y esperar el mismo grafo que webpack

Asumir que una carpeta soltada incluye mágicamente directorios padre o paquetes enlazados

Confundir un módulo integrado (@use "sass:color") con un módulo de archivo (@use "./tokens")

Tratar el modo bundle como una concatenación: el orden de archivos no es una lista manual — Sass parte de una entrada

El compilador informa de un módulo ausente. Es lo esperado: copia los parciales locales que de verdad necesitas a la carpeta soltada, o compila el fragmento que no depende de npm.

Llamar «minificación» a la compilación

SCSS/LESS → CSS es una transformación de lenguaje. CSS → CSS más pequeño es un paso de minificación (espacios, comentarios, a veces reescritura). La salida compressed de Sass no es CSSO. No te saltes la guía de minificación CSS si el objetivo es el tamaño.

Entregar el CSS expanded del compilador como «CSS de producción»

Esperar que Sass compressed elimine selectores no usados o reescriba colores como CSSO

Pegar CSS compilado en beautify-scss — esa herramienta formatea SCSS, no una hoja CSS

Usar unminify-scss sobre CSS que nunca fue SCSS

Compila primero y luego minifica con el minificador CSS. Si necesitas releer SCSS/LESS minificado, usa la herramienta unminify correspondiente — formatea, no recupera los nombres de variables originales.

Mezclar $variables y @variables en el mismo pegado

Las variables SCSS empiezan por $ y los mixins usan @mixin / @include. Las variables LESS empiezan por @ y los mixins parecen definiciones de clase. Dart Sass no analiza LESS; less.js no analiza SCSS.

Pegar LESS en el compilador SCSS porque «todo es CSS con extras»

Usar interpolación SCSS #{ } dentro de un archivo LESS

Olvidar que el SCSS de archivo único usa llaves — el .sass indentado pertenece al modo bundle

Activar JavaScript inline de LESS sobre una fuente no fiable

Obtienes un error de sintaxis en un dólar o en una at-rule que el otro compilador no conoce. Elige la herramienta correcta; no actives el JS de LESS salvo que confíes en la fuente.

SCSS vs LESS vs un build de verdad — lo que FastMinify ejecuta realmente

Dos compiladores, dos motores

La herramienta SCSS compila con Dart Sass (compileString, sintaxis scss). La herramienta LESS compila con less.js. Las opciones difieren porque los motores difieren — no hay un interruptor único de «preprocesador».

Estilo de salida SCSS: expanded (legible) o compressed (CSS compactado) — no compact/nested

Source map inline SCSS opcional en archivo único; silenciar deprecations cubre solo global-builtin y color-functions

LESS: interruptor compress, source map inline opcional, strict math (paréntesis obligatorios en cálculos), JS inline desactivado por defecto

Los módulos Sass integrados (sass:color, sass:math, …) funcionan en un pegado único; @use/@import de archivos exigen modo bundle

Archivo único vs bundle de proyecto

El modo pegar es un solo búfer. El modo bundle es un archivo de entrada más los archivos locales que Dart Sass o Less alcanzan de verdad. No es una concatenación. Versión 1: una entrada, sin source maps, sin resolución de paquetes, 32 MiB por archivo y 32 MiB en total. El pegado en sí está limitado a 512 KiB (el mismo techo que otras entradas de tamaño DevOps del sitio).

SCSS de archivo único: solo .scss con llaves — el .sass indentado se acepta en un bundle si la entrada (o un parcial) termina en .sass

Los bundles SCSS resuelven @use y @import locales; los bundles LESS resuelven @import locales

Los archivos no usados de la carpeta soltada se listan, no se concatenan en silencio

Los imports LESS circulares fallan con una cadena de rutas — corrige el ciclo, no reordenes archivos

Compilador en línea vs sass CLI / Vite / webpack

Usa el navegador cuando la pregunta es «¿qué CSS emite este fragmento?». Usa la cadena del proyecto cuando la pregunta es «¿qué CSS entrega esta app?». Los paquetes npm, los imports glob y los alias de load-path solo existen en el segundo caso. Un compilador en línea sigue sin ser un bundler — véase también minificadores en línea vs herramientas de build.

FastMinify: sin instalación, sin cuenta, pestaña local, feedback inmediato sobre un snippet

sass CLI / lessc: disco completo, load paths y los mismos motores que lanzarás en CI

Vite y webpack: watch, CSS partido, PostCSS y minify de producción en un solo grafo

Un minificador en línea sigue sin ser un bundler

En qué se compilan de verdad SCSS y LESS

Variables y anidación

Una variable se sustituye; los selectores anidados se aplanan. Esa es toda la gracia de un fragmento de revisión de 20 líneas: ver el CSS que un navegador analizará, no el azúcar de autoría.

Antes

$brand: #336699;
$spacing: 8px;

.card {
  padding: $spacing;
  .title { color: $brand; }
}

Después

.card {
  padding: 8px;
}
.card .title {
  color: #336699;
}

SCSS: $brand, $spacing — LESS: @base, @gap (incluidas operaciones simples como 8px + 4px)

La anidación compila a CSS descendiente (o selector padre) — no a un polyfill runtime de CSS Nesting

El selector padre & lo expande el motor; no esperes CSS Nesting en la salida

El estilo expanded conserva saltos de línea; compressed sigue siendo compilación, no CSSO

Mixins (y guards de LESS)

Un mixin se copia en cada sitio de inclusión. FastMinify compila las mismas construcciones que en local: @mixin / @include de SCSS, mixins paramétricos de LESS y guards LESS del tipo when (@size > 12px).

Antes

@mixin rounded($radius: 4px) {
  border-radius: $radius;
}

.btn {
  @include rounded(8px);
  background: #eee;
}

Después

.btn {
  border-radius: 8px;
  background: #eee;
}

Los mixins SCSS aceptan argumentos y valores por defecto — desaparecen del CSS; solo quedan las declaraciones

Los mixins LESS a menudo parecen nombres de clase con paréntesis — no son clases extra en la salida salvo que los llames así

Los guards omiten el cuerpo del mixin cuando la condición es falsa — útil en una demo, fácil de malinterpretar en una PR

Un mixin que @include archivos que no soltaste fallará en modo bundle por la misma razón que cualquier ruta ausente

Funciones integradas vs archivos en disco

@use 'sass:color' es un módulo integrado: compila en modo pegar. @use './tokens' es un módulo de archivo: suelta la carpeta, elige la entrada y deja que Dart Sass recorra los parciales .scss / .sass alcanzables. LESS no tiene el sistema de módulos de Sass; usa @import de archivos .less locales en modo bundle.

Antes

@use 'sass:color';

$base: #336699;
.link {
  color: color.adjust($base, $lightness: -10%);
}

Después

.link {
  color: rgb(38.25, 72.75, 114.75);
}

sass:color, sass:math y otros integrados no exigen una carpeta soltada

Los parciales con guion bajo (_buttons.scss) se resuelven como Dart Sass siempre hizo — inclúyelos en el drop

Los imports url() remotos y los alias ~package quedan fuera de alcance

Si el snippet compila pero el repo no, el repo tira de un paquete que el navegador no ve

Compilar en la pestaña: snippet, luego parciales locales, luego CSS

Compilar un fragmento en segundos

Abre el compilador SCSS o el compilador LESS. Pegar compila automáticamente; después de escribir, pulsa Compilar o ⌘↵ — la compilación en cada pulsación está desactivada a propósito. Tope: 512 KiB para un pegado único.

Paso 1 — Pegar el origen del preprocesador

Sintaxis SCSS con llaves en la herramienta SCSS; LESS en la herramienta LESS. Carga el ejemplo si solo quieres ver el pipeline.

Paso 2 — Ajustar las opciones de salida

SCSS: expanded vs compressed, source map opcional, silenciar deprecations opcional. LESS: compress, source map, strict math, JS inline solo si confías en la fuente.

Paso 3 — Leer el CSS, los bytes y las líneas

El panel de resultado muestra el CSS compilado más los tamaños de entrada/salida. Copia el CSS a la PR, al CMS o a la siguiente herramienta FastMinify.

Empaquetar un proyecto local de parciales

Elige Bundle project, suelta la carpeta y selecciona un archivo de entrada. Dart Sass resuelve @use / @import locales; Less resuelve @import locales. Las rutas siguen siendo relativas dentro de esa carpeta. Las source maps no están disponibles en el modo bundle v1. Límites: 32 MiB por archivo y 32 MiB en total, una entrada.

No es lo mismo que concatenar hojas — los archivos inalcanzables siguen sin usarse

El .sass indentado es válido dentro de un bundle SCSS; el editor de archivo único es solo SCSS

node_modules, paquetes y URL remotas no se resuelven — copia los parciales que necesites

Los errores incluyen línea/columna y, en un bundle, la ruta virtual del archivo que falla

Después del CSS: beautify, unminify, minify

La compilación responde a «¿qué CSS es esto?». El formato y el tamaño son herramientas separadas a propósito.

SCSS ilegible antes de compilar: embellecer SCSS o embellecer LESS

Fuente de preprocesador minificada que hay que leer: desminificar SCSS / desminificar LESS — solo formato; los nombres ya perdidos siguen perdidos

Tamaño CSS de producción: minificar CSS tras compilar — es minificación de clase CSSO, no el estilo compressed de Sass

Vista del hub: preprocesadores CSS

Cuándo basta el navegador — y cuándo sigues necesitando la CLI

sass CLI (Dart Sass) para el repo que vas a entregar

Si el grafo de hojas incluye paquetes npm, load paths compartidos o un job de CI, ejecuta el mismo Dart Sass que el navegador — en disco. FastMinify es la vista previa; la CI es la fuente de verdad de lo que contiene el CSS de producción.

Ejemplo básico

npm install --save-dev sass
npx sass src/styles/main.scss dist/main.css --style=expanded

lessc para un árbol LESS con node_modules

less.js en el navegador encaja con un snippet. Un árbol LESS de la era Bootstrap con @import "bootstrap" necesita lessc y los paquetes en disco — FastMinify no los descargará.

Ejemplo básico

npm install --save-dev less
npx lessc src/styles/app.less dist/app.css

Vite / webpack — el pipeline de la app

Vite compila imports ?inline y .scss a través del grafo de módulos; webpack usa sass-loader / less-loader. Ahí es donde PostCSS, Purge y la minificación CSS pertenecen para una aplicación. Las herramientas del navegador sirven al fragmento aislado y a la carpeta que puedes soltar — no a sustituir el bundler. Compromiso frente a un flujo solo en línea: coste de instalación, pero resolución de paquetes y modo watch.

FastMinify compile-scss-to-css / compile-less-to-css

Sin instalación, sin subida, Dart Sass y less.js en la pestaña, más un bundle local v1 para parciales. Compromiso: pegado de 512 KiB / bundle de 32 MiB, sin npm, sin source maps de bundle. Úsalo para revisar, enseñar y desbloquear una máquina sin Node — luego minifica el CSS si entregas el resultado.

Conclusión

SCSS y LESS siguen ganándose el puesto como lenguajes de autoría — variables, anidación, mixins — pero no deberías necesitar una instalación completa de Node para ver el CSS que emite un fragmento. FastMinify ejecuta Dart Sass y less.js en el navegador, opcionalmente sobre una carpeta soltada de parciales locales, con límites explícitos: sin node_modules, sin source maps de bundle, pegado de 512 KiB / bundle de 32 MiB. Compila y luego formatea o minifica con las herramientas CSS correspondientes. La app de producción sigue en Vite, webpack o la CLI de Sass. Empieza en el hub de preprocesadores CSS y lee la guía de minificación CSS cuando el siguiente problema sea el tamaño — no la sintaxis.

Compilar SCSS o LESS ahora

Pega un fragmento para una respuesta en 10 segundos; suelta una carpeta solo si los archivos @use/@import son locales

No esperes que los paquetes npm o los imports CDN se resuelvan en la pestaña

Trata la salida compressed como CSS legible-frente-a-apretado, no como minificación CSSO

Deja el JavaScript inline de LESS desactivado salvo fuente de confianza

Entrega el CSS de la aplicación desde la cadena del repo — usa FastMinify para inspeccionar, enseñar y desbloquear

Compartir este artículo

Compartir este artículo:

Compilar SCSS y LESS a CSS en línea, sin instalar un build tool

¿Por qué compilar SCSS o LESS fuera del proyecto?

Cuándo compilar en el navegador y cuándo no

Los errores de compilación que te comen una tarde entera

SCSS vs LESS vs un build de verdad — lo que FastMinify ejecuta realmente

En qué se compilan de verdad SCSS y LESS

Antes

Después

Antes

Después

Antes

Después

Compilar en la pestaña: snippet, luego parciales locales, luego CSS

Paso 1 — Pegar el origen del preprocesador

Paso 2 — Ajustar las opciones de salida

Paso 3 — Leer el CSS, los bytes y las líneas

Cuándo basta el navegador — y cuándo sigues necesitando la CLI

Ejemplo básico

Ejemplo básico

Conclusión

Artículos relacionados