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:

SCSSLESSPreprocesador CSSCSSTutorial

Compilar SCSS o LESS fuera del proyecto

Un comentario de pull request con doce líneas de SCSS, un fragmento de Stack Overflow con un mixin paramétrico o una sesión de incorporación en un portátil sin Node: nada de eso justifica lanzar npm run build. FastMinify no sustituye a Dart Sass en CI, a sass-loader ni al pipeline CSS de Vite. El compilador SCSS a CSS ejecuta Dart Sass en la pestaña, y 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. Las herramientas están en el hub de preprocesadores CSS. Tras compilar, usa el minificador CSS en línea si necesitas CSS más pequeño, porque la salida expanded solo es legible.

Dart Sass para SCSS y less.js para 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

Agrupar una carpeta de proyecto resuelve los parciales locales de @use / @import sin concatenar archivos a mano

Estilo de salida expanded o compressed en SCSS, opción de comprimir en LESS y source maps inline opcionales en un archivo único

Límites claros: sin node_modules, sin imports de CDN, sin source maps al agrupar un proyecto

Encadena con las herramientas de embellecer y desminificar SCSS o LESS, y minifica después el CSS para el resto del pipeline

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

Casos que encajan

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 con @use sobre paquetes npm o sobre rutas de carga de un 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 proyecto soltado y agrupado (esta versión no las genera)

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

Arrancar la aplicación 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 la instalación, 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.

Dar por hecho que @use "bootstrap" se resuelve 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, como @use "sass:color", con un módulo de archivo, como @use "./tokens"

Tratar la agrupación como una concatenación: el orden de los archivos no es una lista manual, porque Sass parte de una sola 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 «embellecer SCSS», una herramienta para SCSS y no para hojas CSS

Usar «desminificar SCSS» sobre CSS que nunca fue SCSS

Compila primero y minifica después con el minificador CSS. Si necesitas releer SCSS o LESS minificado, usa la herramienta de desminificación correspondiente: formatea, pero 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: un archivo .sass indentado pertenece a la agrupación de proyecto

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, LESS y un build de verdad, y 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, así que no hay un interruptor único de «preprocesador».

Estilo de salida SCSS: expanded para un CSS legible o compressed para un CSS compactado, pero no compact ni nested

Source map inline opcional de SCSS en un archivo único; Silenciar deprecaciones 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; los @use/@import de archivos exigen Agrupar proyecto

Archivo único o proyecto agrupado

El modo pegar es un solo búfer. Agrupar es un archivo de entrada más los archivos locales que Dart Sass o Less alcanzan de verdad. No es una concatenación. En esta versión: una entrada, sin source maps, sin resolución de paquetes, 32 MiB por archivo y 32 MiB en total. Un pegado único está limitado a 512 KiB, como otras entradas de ese tamaño en el sitio.

SCSS de archivo único: solo archivos .scss con llaves. Un archivo .sass indentado se acepta en un proyecto agrupado si la entrada (o un parcial) termina en .sass

Los proyectos SCSS agrupados resuelven @use e @import locales; los proyectos LESS agrupados 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 en lugar de reordenar archivos

El compilador en línea frente a la CLI de sass, Vite y webpack

Usa el navegador cuando la pregunta es «¿qué CSS emite este fragmento?». Usa la cadena de herramientas del proyecto cuando la pregunta es «¿qué CSS entrega esta aplicación?». Los paquetes npm, los imports glob y los alias de load-path solo existen en la segunda. 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, una pestaña local y respuesta sobre el fragmento mientras trabajas

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;
}

Las variables se sustituyen: $brand y $spacing en SCSS, @base y @gap en LESS (incluidas operaciones simples como 8px + 4px)

La anidación se compila a CSS con selectores descendientes o de padre, no a un polyfill de CSS Nesting en tiempo de ejecución

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, y desaparecen del CSS: solo quedan las declaraciones

Los mixins LESS suelen parecer nombres de clase con paréntesis, pero no son clases adicionales en la salida salvo que los llames así

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

Un mixin que @include archivos que no soltaste fallará al agrupar un proyecto, por la misma razón que cualquier ruta ausente

Funciones integradas o archivos en disco

@use 'sass:color' es un módulo integrado, así que 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 con archivos .less locales cuando agrupas un proyecto.

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 al soltar la carpeta

Los imports url() remotos y los alias ~package no se admiten

Si el fragmento compila, pero el repositorio no, el repositorio depende de un paquete que el navegador no ve

Compilar en la pestaña, del fragmento a los parciales locales y al CSS

Compilar un fragmento

Abre el compilador SCSS o el compilador LESS. Al pegar, se compila automáticamente. Después de escribir, elige Compilar o pulsa ⌘↵ (Ctrl+Enter en otros sistemas), porque la compilación en cada pulsación está desactivada a propósito. Tope: 512 KiB para un pegado único.

Primero, pegar el código del preprocesador

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

Después, ajustar las opciones de salida

En SCSS, elige expanded o compressed, con source map y silenciado de deprecaciones como opciones. En LESS, elige compresión, source map y strict math, y JavaScript inline solo si confías en la fuente.

Por último, 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.

Agrupar un proyecto local de parciales

Elige Agrupar proyecto, suelta la carpeta y selecciona un archivo de entrada. Dart Sass resuelve los @use / @import locales y Less resuelve los @import locales. Las rutas siguen siendo relativas dentro de esa carpeta. Los source maps no están disponibles al agrupar en esta versión. Límites: 32 MiB por archivo y 32 MiB en total, una sola entrada.

No equivale a concatenar hojas: los archivos inalcanzables siguen sin usarse

Un archivo .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, embellecer, desminificar y minificar

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

Código de preprocesador minificado que hay que leer: desminificar SCSS / desminificar LESS. Solo dan formato, los nombres ya perdidos siguen perdidos

Tamaño del CSS de producción: minificar CSS tras compilar. Es una 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 trabajo de CI, ejecuta en disco el mismo Dart Sass que usa el navegador. FastMinify da la vista previa, y la CI es la fuente de verdad sobre 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 sirve para un fragmento. Un árbol LESS de la era Bootstrap con @import "bootstrap" necesita lessc y los paquetes en disco, y FastMinify no los descargará.

Ejemplo básico

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

Vite o webpack, el pipeline de la aplicación

Vite compila los imports ?inline y .scss a través del grafo de módulos, y webpack usa sass-loader / less-loader. Ahí es donde PostCSS, Purge y la minificación CSS tienen su sitio en una aplicación. Las herramientas del navegador sirven para el fragmento aislado y la carpeta que puedes soltar, sin sustituir al 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, con Dart Sass y less.js en la pestaña, más la agrupación local de parciales. Compromiso: 512 KiB al pegar y 32 MiB al agrupar, sin npm, sin source maps al agrupar. Úsalo para revisar, enseñar y desbloquear una máquina sin Node, y minifica el CSS si entregas el resultado.

Conclusión

SCSS y LESS siguen siendo útiles como lenguajes para escribir, con sus variables, su anidación y sus 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 al agrupar, 512 KiB al pegar y 32 MiB al agrupar. Compila y luego formatea o minifica con las herramientas CSS correspondientes. La aplicación 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 y no la sintaxis.

Compilar SCSS o LESS ahora

Compilar SCSS a CSS Compilar LESS a CSS Minificar CSS Hub de preprocesadores CSS

Pega un fragmento para leer el CSS; 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 un CSS más apretado, no como una minificación CSSO

Deja el JavaScript inline de LESS desactivado salvo fuente de confianza

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

Compartir este artículo

Compartir este artículo:

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, LESS y un build de verdad, y 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, del fragmento a los parciales locales y al CSS

Primero, pegar el código del preprocesador

Después, ajustar las opciones de salida

Por último, 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