Compiler du SCSS et du LESS en CSS en ligne, sans installer de build tool

Compilez un extrait SCSS ou LESS (variables, mixins) en CSS dans le navigateur, sans npm run build — pour une revue, un snippet ou une machine sans Node.

16.09.2026

13 min de lecture

Partager cet article:

SCSS

LESS

Préprocesseur CSS

CSS

Tutoriel

Pourquoi compiler du SCSS ou du LESS hors du projet ?

Un commentaire de pull request avec douze lignes de SCSS, un snippet Stack Overflow avec un mixin paramétré, ou une session d'onboarding sur un laptop sans Node : rien de tout cela ne justifie de lancer npm run build. FastMinify ne remplace pas Dart Sass en CI, sass-loader ni le pipeline CSS de Vite. Le compilateur SCSS vers CSS exécute Dart Sass dans l'onglet ; le compilateur LESS vers CSS exécute less.js de la même façon. Collez un extrait, ou déposez un dossier local de partiels, et lisez du CSS standard — rien n'est envoyé. Le cluster vit sur le hub préprocesseurs CSS. Après compilation, enchaînez avec le minificateur CSS en ligne quand vous voulez vraiment du CSS plus petit, pas seulement une sortie expanded.

Dart Sass (SCSS) et less.js (LESS) tournent entièrement dans le navigateur — aucun aller-retour serveur

Variables, imbrication, mixins et modules intégrés comme sass:color compilent comme en CLI locale

Les bundles dossier projet résolvent les partiels @use / @import locaux sans concaténer à la main

Style de sortie expanded ou compressed (SCSS) ; option compress (LESS) ; source maps inline optionnelles en fichier unique

Limites honnêtes : pas de node_modules, pas d'imports CDN, pas de source maps en mode bundle

Enchaînez avec beautify / unminify SCSS ou LESS, puis minify CSS pour le reste du pipeline

Quand compiler dans le navigateur, et quand s'en passer

Bons cas d'usage

Le compilateur est un scalpel, pas l'usine de production.

Relire un mixin ou un token dans une PR sans cloner le repo

Convertir un exemple de design system en CSS collable dans un CMS ou un template email

Enseigner variables, imbrication et mixins avec un retour CSS immédiat

Comparer compressed vs expanded avant de changer une option de build

Compiler un dossier autonome de partiels que vous pouvez déposer (sans npm)

Laissez ça au build

Si la réponse dépend de paquets, d'alias ou du graphe complet de l'application, restez en CI.

Feuilles qui @use des paquets npm ou un load path monorepo

Remplacer Vite/webpack comme seul pipeline CSS d'une appli

Prendre la sortie compressed de Sass pour un substitut de CSSO / cssnano

Activer le JavaScript inline LESS sur du code que vous n'avez pas écrit

Attendre des source maps d'un bundle projet déposé (la v1 n'en émet pas)

Les erreurs de compilation qui gâchent tout un après-midi

Démarrer l'appli pour compiler douze lignes

Un token de design system, un mixin ponctuel ou un commentaire de revue n'ont pas besoin de Vite, de webpack ni d'une image Docker Node. Le coût, c'est d'attendre l'install, le cache et tout le graphe CSS alors que vous vouliez seulement voir ce que devient $spacing * 2.

Lancer le build de production juste pour vérifier un sélecteur imbriqué

Demander à un collègue de « pull et yarn » pour lire le CSS compilé dans une PR

Sauter la revue parce que Sass n'est pas installé sur la machine du relecteur

Coller du SCSS brut dans un champ CMS qui n'accepte que du CSS

Collez l'extrait dans le compilateur navigateur, lisez le CSS, puis collez ce CSS (ou une variante compressed) là où l'hôte attend du CSS — pas du SCSS.

S'attendre à ce que @use "bootstrap" se résolve depuis npm

La syntaxe modules de Dart Sass fonctionne. Ce qui ne fonctionne pas dans le navigateur, c'est la résolution des paquets. FastMinify ne lit jamais le disque hors du dossier déposé, et ne va chercher ni node_modules, ni GitHub, ni un CDN.

Écrire @use "bootstrap" ou @import "~bootstrap" en attendant le même graphe que webpack

Supposer qu'un dossier déposé inclut magiquement les répertoires parents ou les paquets liés

Confondre un module intégré (@use "sass:color") avec un module fichier (@use "./tokens")

Traiter le mode bundle comme une concat : l'ordre des fichiers n'est pas une liste manuelle — Sass part d'une entrée

Le compilateur signale un module manquant. C'est normal : copiez les partiels locaux dont vous avez vraiment besoin dans le dossier déposé, ou compilez l'extrait qui ne dépend pas de npm.

Appeler la compilation « minification »

SCSS/LESS → CSS est une transformation de langage. CSS → CSS plus petit est une étape de minification (espaces, commentaires, parfois réécriture). La sortie compressed de Sass n'est pas CSSO. Ne sautez pas le guide de minification CSS si la taille est l'objectif.

Livrer le CSS expanded du compilateur comme « CSS de production »

Attendre de Sass compressed qu'il supprime les sélecteurs inutilisés ou réécrive les couleurs comme CSSO

Coller du CSS compilé dans beautify-scss — cet outil formate du SCSS, pas une feuille CSS

Utiliser unminify-scss sur du CSS qui n'a jamais été du SCSS

Compilez d'abord, puis minifiez avec le minificateur CSS. Si vous devez relire du SCSS/LESS minifié, utilisez l'outil unminify correspondant — il formate, il ne récupère pas les noms de variables d'origine.

Mélanger $variables et @variables dans le même collage

Les variables SCSS commencent par $ et les mixins utilisent @mixin / @include. Les variables LESS commencent par @ et les mixins ressemblent à des définitions de classe. Dart Sass ne parse pas le LESS ; less.js ne parse pas le SCSS.

Coller du LESS dans le compilateur SCSS parce que « c'est du CSS avec des extras »

Utiliser l'interpolation SCSS #{ } dans un fichier LESS

Oublier que le SCSS fichier unique est en syntaxe accolades — le .sass indenté appartient au mode bundle

Activer le JavaScript inline LESS sur une source non fiable

Vous obtenez une erreur de syntaxe sur un dollar ou une at-rule que l'autre compilateur ne connaît pas. Choisissez l'outil correspondant ; n'activez le JS LESS que si vous faites confiance à la source.

SCSS vs LESS vs un vrai build — ce que FastMinify exécute vraiment

Deux compilateurs, deux moteurs

L'outil SCSS compile avec Dart Sass (compileString, syntaxe scss). L'outil LESS compile avec less.js. Les options diffèrent parce que les moteurs diffèrent — il n'y a pas de bascule « préprocesseur » unique.

Style de sortie SCSS : expanded (lisible) ou compressed (CSS compacté) — pas compact/nested

Source map inline SCSS optionnelle en fichier unique ; silence des dépréciations couvre uniquement global-builtin et color-functions

LESS : option compress, source map inline optionnelle, strict math (parenthèses obligatoires autour des calculs), JS inline désactivé par défaut

Les modules Sass intégrés (sass:color, sass:math, …) marchent en collage unique ; @use/@import fichiers exigent le mode bundle

Fichier unique vs bundle projet

Le mode collage est un seul tampon. Le mode bundle est un fichier d'entrée plus les fichiers locaux que Dart Sass ou Less atteignent réellement. Ce n'est pas une concaténation. Version 1 : une entrée, pas de source maps, pas de résolution de paquets, 32 Mio par fichier et 32 Mio au total. Le collage seul est plafonné à 512 Kio (même plafond que les autres saisies de taille DevOps du site).

SCSS fichier unique : .scss accolades uniquement — le .sass indenté est accepté dans un bundle si l'entrée (ou un partiel) finit en .sass

Les bundles SCSS résolvent @use et @import locaux ; les bundles LESS résolvent @import locaux

Les fichiers inutilisés du dossier déposé sont listés, pas concaténés en silence

Les imports LESS circulaires échouent avec une chaîne de chemins — corrigez le cycle, ne mélangez pas l'ordre des fichiers

Compilateur en ligne vs sass CLI / Vite / webpack

Utilisez le navigateur quand la question est « quel CSS cet extrait émet-il ? » Utilisez la chaîne du projet quand la question est « quel CSS cette appli livre-t-elle ? » Les paquets npm, les imports glob et les alias de load-path n'existent que dans le second cas. Un compilateur en ligne n'est toujours pas un bundler — voir aussi minificateurs en ligne vs outils de build.

FastMinify : pas d'install, pas de compte, onglet local, feedback immédiat sur un snippet

sass CLI / lessc : disque complet, load paths, et les mêmes moteurs que vous lancerez en CI

Vite et webpack : watch, CSS découpé, PostCSS et minify de production dans un seul graphe

Un minificateur en ligne n'est toujours pas un bundler

Ce que SCSS et LESS compilent réellement

Variables et imbrication

Une variable est substituée ; les sélecteurs imbriqués sont aplatis. C'est tout l'intérêt d'un extrait de revue de 20 lignes : voir le CSS qu'un navigateur parsera, pas le sucre d'écriture.

Avant

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

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

Après

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

SCSS : $brand, $spacing — LESS : @base, @gap (y compris des opérations simples comme 8px + 4px)

L'imbrication compile en CSS descendant (ou sélecteur parent) — pas en polyfill CSS Nesting runtime

Le sélecteur parent & est développé par le moteur ; n'attendez pas de CSS Nesting dans la sortie

Le style expanded garde les retours à la ligne ; compressed reste de la compilation, pas CSSO

Mixins (et guards LESS)

Un mixin est copié à chaque site d'inclusion. FastMinify compile les mêmes constructions qu'en local : @mixin / @include SCSS, mixins paramétrés LESS, et guards LESS du type when (@size > 12px).

Avant

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

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

Après

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

Les mixins SCSS prennent arguments et défauts — ils disparaissent du CSS ; seules les déclarations restent

Les mixins LESS ressemblent souvent à des noms de classe avec parenthèses — ce ne sont pas des classes en plus dans la sortie, sauf si vous les appelez ainsi

Les guards omettent le corps du mixin quand la condition est fausse — utile en démo, facile à mal lire dans une PR

Un mixin qui @include des fichiers non déposés échouera en mode bundle pour la même raison qu'un chemin manquant

Fonctions intégrées vs fichiers sur disque

@use 'sass:color' est un module intégré : il compile en mode collage. @use './tokens' est un module fichier : déposez le dossier, choisissez l'entrée, laissez Dart Sass parcourir les partiels .scss / .sass atteignables. LESS n'a pas le système de modules Sass ; il utilise @import de fichiers .less locaux en mode bundle.

Avant

@use 'sass:color';

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

Après

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

sass:color, sass:math et les autres intégrés n'exigent pas de dossier déposé

Les partiels soulignés (_buttons.scss) se résolvent comme Dart Sass l'a toujours fait — incluez-les dans le dépôt

Les imports url() distants et les alias ~package sont hors scope

Si la compilation réussit sur un snippet mais échoue dans le repo, le repo tire un paquet que le navigateur ne voit pas

Compiler dans l'onglet : snippet, puis partiels locaux, puis CSS

Compiler un extrait en quelques secondes

Ouvrez le compilateur SCSS ou le compilateur LESS. Un collage compile automatiquement ; après saisie, cliquez sur Compiler ou ⌘↵ — la compilation à chaque frappe est volontairement désactivée. Plafond : 512 Kio pour un collage unique.

Étape 1 — Coller la source préprocesseur

Syntaxe SCSS accolades dans l'outil SCSS ; LESS dans l'outil LESS. Chargez l'exemple si vous voulez seulement voir le pipeline.

Étape 2 — Régler les options de sortie

SCSS : expanded vs compressed, source map optionnelle, silence des dépréciations optionnel. LESS : compress, source map, strict math, JS inline seulement si la source est de confiance.

Étape 3 — Lire le CSS, les octets et les lignes

Le panneau résultat montre le CSS compilé plus les tailles entrée/sortie. Copiez le CSS dans la PR, le CMS, ou l'outil FastMinify suivant.

Bundler un projet local de partiels

Choisissez Bundle projet, déposez le dossier, sélectionnez un fichier d'entrée. Dart Sass résout les @use / @import locaux ; Less résout les @import locaux. Les chemins restent relatifs dans ce dossier. Les source maps sont indisponibles en mode bundle v1. Limites : 32 Mio par fichier et 32 Mio au total, une entrée.

Ce n'est pas concaténer des feuilles — les fichiers inatteignables restent inutilisés

Le .sass indenté est valide dans un bundle SCSS ; l'éditeur fichier unique est SCSS uniquement

node_modules, paquets et URL distantes ne sont pas résolus — copiez les partiels nécessaires

Les erreurs incluent ligne/colonne et, dans un bundle, le chemin virtuel du fichier en échec

Après le CSS : beautify, unminify, minify

La compilation répond à « quel CSS est-ce ? ». Le formatage et la taille sont des outils séparés, volontairement.

SCSS illisible avant de compiler : beautifier SCSS ou beautifier LESS

Source préprocesseur minifiée à relire : déminifier SCSS / déminifier LESS — format seulement, les noms déjà perdus le restent

Taille CSS de production : minifier CSS après compile — c'est de la minification classe CSSO, pas le style compressed de Sass

Vue d'ensemble du hub : préprocesseurs CSS

Quand le navigateur suffit — et quand il vous faut encore la CLI

sass CLI (Dart Sass) pour le repo que vous livrerez

Si le graphe de feuilles inclut des paquets npm, des load paths partagés ou un job CI, lancez le même Dart Sass que le navigateur — sur disque. FastMinify est l'aperçu ; la CI est la source de vérité de ce que contient le CSS de production.

Exemple de base

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

lessc pour un arbre LESS avec node_modules

less.js dans le navigateur colle à un snippet. Un arbre LESS d'époque Bootstrap avec @import "bootstrap" a besoin de lessc et des paquets sur disque — FastMinify ne les téléchargera pas.

Exemple de base

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

Vite / webpack — le pipeline de l'appli

Vite compile les imports ?inline et .scss via le graphe de modules ; webpack utilise sass-loader / less-loader. C'est là que PostCSS, Purge et la minification CSS appartiennent pour une application. Les outils navigateur servent l'extrait isolé et le dossier que vous pouvez déposer — pas à remplacer le bundler. Compromis face à un flux 100 % en ligne : coût d'install, mais résolution de paquets et watch.

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

Pas d'install, pas d'upload, Dart Sass et less.js dans l'onglet, plus un bundle local v1 pour les partiels. Compromis : collage 512 Kio / bundle 32 Mio, pas de npm, pas de source maps bundle. Servez-vous-en pour revoir, enseigner et débloquer une machine sans Node — puis minifiez le CSS si vous livrez le résultat.

Conclusion

SCSS et LESS restent utiles comme langages d'écriture — variables, imbrication, mixins — mais vous ne devriez pas avoir besoin d'une install Node complète pour voir le CSS qu'un extrait émet. FastMinify exécute Dart Sass et less.js dans le navigateur, éventuellement sur un dossier déposé de partiels locaux, avec des limites explicites : pas de node_modules, pas de source maps bundle, collage 512 Kio / bundle 32 Mio. Compilez, puis formatez ou minifiez avec les outils CSS correspondants. L'appli de production reste dans Vite, webpack ou la CLI Sass. Commencez par le hub préprocesseurs CSS, et lisez le guide de minification CSS quand le prochain problème est la taille — pas la syntaxe.

Compiler SCSS ou LESS maintenant

Collez un extrait pour une réponse en 10 secondes ; déposez un dossier seulement si les fichiers @use/@import sont locaux

N'attendez pas que les paquets npm ou les imports CDN se résolvent dans l'onglet

Traitez la sortie compressed comme du CSS lisible-vs-serré, pas comme de la minification CSSO

Laissez le JavaScript inline LESS désactivé sauf source de confiance

Livrez le CSS d'application depuis la chaîne du repo — utilisez FastMinify pour inspecter, enseigner et débloquer

Partager cet article

Partager cet article:

Articles connexes

Base64 : encoder et décoder texte, fichiers et images en ligne

Convertir du texte, un fichier ou une image en Base64 (et inversement) sans backend — data URI CSS, pièce jointe email, payload JWT. 100 % local.

18.09.202615 min de lecture

Vérifier le contraste de couleur WCAG en ligne : AA, AAA et texte large

Un ratio de contraste texte/fond insuffisant est l'erreur d'accessibilité la plus fréquente sur le web. Vérifiez AA/AAA en collant deux couleurs, sans plugin ni extension.

13.09.202611 min de lecture

Compter les mots et caractères pour le SEO : meta description, title et réseaux sociaux

Meta description 155 caractères, title ~60, tweet 280 : comptez mots et caractères dans le navigateur avec le compteur FastMinify — presets SEO, temps de lecture, 100 % local.

09.09.202610 min de lecture