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:

SCSSLESSPréprocesseur CSSCSSTutoriel

Compiler du SCSS ou du LESS hors du projet

Un commentaire de pull request avec douze lignes de SCSS, un extrait Stack Overflow avec un mixin paramétré, ou une session d'accueil sur un portable sans Node : rien de tout cela ne justifie de lancer npm run build. FastMinify ne remplace ni Dart Sass en CI, ni sass-loader, ni le pipeline CSS de Vite. Le compilateur SCSS vers CSS exécute Dart Sass dans l'onglet, et 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é. Les outils se trouvent sur le hub préprocesseurs CSS. Après la compilation, utilisez ensuite le minificateur CSS en ligne si vous voulez du CSS plus petit, car une sortie expanded n'est que lisible.

Dart Sass pour le SCSS et less.js pour le LESS tournent entièrement dans le navigateur, sans aller-retour serveur

Variables, imbrication, mixins et modules intégrés comme sass:color se compilent comme avec la CLI en local

Regrouper un dossier de projet résout les partiels @use / @import locaux sans concaténer les fichiers à la main

Style de sortie expanded ou compressed pour SCSS, option de compression pour LESS et source maps inline facultatives sur un fichier unique

Limites claires : pas de node_modules, pas d'imports CDN, pas de source maps en regroupant un projet

Combinez avec les outils de mise en forme et de déminification SCSS ou LESS, puis minifiez le CSS pour la suite du pipeline

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

Cas où le navigateur convient

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 fichiers source map d'un projet déposé et regroupé (cette version n'en produit pas)

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

Démarrer l'application 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'installation, 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 du navigateur, lisez le CSS, puis collez ce CSS (ou une variante compressed) là où l'hôte attend du CSS et non 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é, comme @use "sass:color", avec un module fichier, comme @use "./tokens"

Traiter le regroupement comme une concaténation : l'ordre des fichiers n'est pas une liste manuelle, car Sass part d'une seule 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 « beautifier SCSS », un outil pour le SCSS et non pour les feuilles CSS

Utiliser « déminifier 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 ou du LESS minifié, utilisez l'outil de déminification correspondant : il met en forme, mais ne restitue 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 lit pas le LESS et less.js ne lit 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 en fichier unique utilise la syntaxe à accolades : un fichier .sass indenté passe par le regroupement de projet

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, LESS et un vrai build, et 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 » commune.

Style de sortie SCSS : expanded pour un CSS lisible ou compressed pour un CSS compacté, mais pas compact ni nested

Source map inline SCSS facultative sur un fichier unique ; l'option Masquer les avertissements de dépréciation ne couvre que global-builtin et color-functions

LESS : option de compression, source map inline facultative, calculs stricts (parenthèses obligatoires autour des calculs), JS inline désactivé par défaut

Les modules Sass intégrés (sass:color, sass:math, …) fonctionnent dans un collage unique ; les @use/@import de fichiers exigent Regrouper un projet

Fichier unique ou projet regroupé

Le mode collage est un seul tampon. Le regroupement 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. Dans cette version : une entrée, pas de source maps, pas de résolution de paquets, 32 MiB par fichier et 32 MiB au total. Un collage seul est plafonné à 512 KiB, comme les autres saisies de cette taille sur le site.

SCSS en fichier unique : .scss à accolades uniquement. Le .sass indenté est accepté dans un projet regroupé si l'entrée (ou un partiel) finit en .sass

Un projet SCSS regroupé résout les @use et @import locaux ; un projet LESS regroupé résout les @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 changez pas l'ordre des fichiers

Le compilateur en ligne face à la CLI sass, Vite et webpack

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

FastMinify : pas d'installation, pas de compte, un onglet local et un retour sur l'extrait pendant que vous travaillez

CLI sass / lessc : accès complet au disque, 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 analysera, 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;
}

Les variables sont substituées : $brand et $spacing en SCSS, @base et @gap en LESS (y compris des opérations simples comme 8px + 4px)

L'imbrication se compile en CSS à sélecteurs descendants (ou de parent), pas en polyfill CSS Nesting à l'exécution

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 des arguments et des valeurs par défaut, puis disparaissent du CSS : seules les déclarations restent

Les mixins LESS ressemblent souvent à des noms de classe avec parenthèses, mais ils n'ajoutent pas de classes à la sortie, sauf si vous les appelez comme tels

Les guards omettent le corps du mixin quand la condition est fausse, ce qui est utile en démonstration, mais facile à mal lire dans une revue de code

Un mixin qui @include des fichiers non déposés échoue au regroupement d'un projet, pour la même raison que tout chemin manquant

Fonctions intégrées ou fichiers sur disque

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

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 préfixés d'un tiret bas (_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 ne sont pas pris en charge

Si la compilation réussit sur un extrait, mais échoue dans le dépôt, c'est que le dépôt dépend d'un paquet que le navigateur ne voit pas

Compiler dans l'onglet, de l'extrait aux partiels locaux puis au CSS

Compiler un extrait

Ouvrez le compilateur SCSS ou le compilateur LESS. Un collage compile automatiquement. Après une saisie, choisissez Compiler ou appuyez sur ⌘↵ (Ctrl+Entrée ailleurs), car la compilation à chaque frappe est volontairement désactivée. Plafond : 512 KiB pour un collage unique.

D'abord, coller la source du préprocesseur

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

Ensuite, régler les options de sortie

Pour SCSS, choisissez expanded ou compressed, avec une source map et le masquage des dépréciations en option. Pour LESS, choisissez la compression, la source map et l'option Strict math, et le JavaScript inline seulement si vous faites confiance à la source.

Enfin, 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.

Regrouper un projet local de partiels

Choisissez Regrouper un projet, déposez le dossier, puis sélectionnez un fichier d'entrée. Dart Sass résout les @use / @import locaux et Less résout les @import locaux. Les chemins restent relatifs dans ce dossier. Les fichiers source map sont indisponibles pour un projet regroupé dans cette version. Limites : 32 MiB par fichier et 32 MiB au total, une seule entrée.

Ce n'est pas une concaténation de 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, mettre en forme, déminifier et minifier

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 de préprocesseur minifiée à relire : déminifier SCSS / déminifier LESS. Ces outils ne font que mettre en forme, les noms déjà perdus le restent

Taille du CSS de production : minifier CSS après la compilation. C'est une minification de 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 de CI, lancez sur disque le même Dart Sass que le navigateur. FastMinify donne l'aperçu, et la CI fait foi pour le contenu du 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 convient à un extrait. Un arbre LESS de l'époque Bootstrap avec @import "bootstrap" a besoin de lessc et des paquets sur disque, et FastMinify ne les télécharge pas.

Exemple de base

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

Vite ou webpack, le pipeline de l'application

Vite compile les imports ?inline et .scss via le graphe de modules, et webpack utilise sass-loader / less-loader. C'est là que PostCSS, Purge et la minification CSS ont leur place pour une application. Les outils du navigateur servent l'extrait isolé et le dossier que vous pouvez déposer, sans remplacer le bundler. Compromis par rapport à un flux entièrement en ligne : un coût d'installation, mais la résolution des paquets et le mode watch.

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

Pas d'installation, pas d'envoi, Dart Sass et less.js dans l'onglet, plus un regroupement local pour les partiels. Compromis : 512 KiB en collage et 32 MiB en regroupement, pas de npm, pas de source maps en regroupement. Servez-vous-en pour relire, enseigner et dépanner une machine sans Node, puis minifiez le CSS si vous livrez le résultat.

Conclusion

SCSS et LESS restent utiles comme langages d'écriture, avec leurs variables, leur imbrication et leurs mixins, mais il ne devrait pas falloir une installation complète de Node pour voir le CSS qu'un extrait produit. 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 en regroupement, 512 KiB en collage et 32 MiB en regroupement. Compilez, puis mettez en forme ou minifiez avec les outils CSS correspondants. L'application 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, non la syntaxe.

Compiler SCSS ou LESS maintenant

Compiler SCSS en CSS Compiler LESS en CSS Minifier CSS Hub préprocesseurs CSS

Collez un extrait pour lire le CSS ; 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 un CSS plus serré, pas comme une minification CSSO

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

Livrez le CSS de l'application depuis la chaîne d'outils du dépôt, et servez-vous de FastMinify pour inspecter, enseigner et dépanner

Partager cet article

Partager cet article:

Articles connexes

Vérifier une signature JWT contre un JWKS sans backend

Collez un token et un JWKS pour vérifier une signature RS256, ES256 ou HS256 dans le navigateur. Choix par kid, erreurs mesurées, claims à contrôler.

26.10.202614 min de lecture

HTTP/2, HTTP/3 et minification : la minification est-elle encore utile ?

HTTP/2 et HTTP/3 changent le trajet des fichiers, pas leur poids. Mesures de taille, de compilation et de bundling : ce que la minification apporte encore.

22.10.202617 min de lecture

Timestamp Unix : convertir un epoch et éviter les erreurs de fuseau

Convertissez un epoch Unix en date lisible et inversement, distinguez secondes et millisecondes, et évitez les pièges de fuseau, de JWT et de changement d’heure.

19.10.202620 min de lecture