Converti LESS in CSS Online
Converti LESS in CSS pulito, gratis, direttamente nel tuo browser.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Perché usarlo
Compila LESS in CSS nel browser
Nessuna configurazione
Nessun npm install, nessun Node.js. Incolla il tuo LESS e ottieni CSS immediatamente.
Compilatore less.js
Usa il compilatore ufficiale less.js. Piena compatibilità con variabili, mixin, operazioni e nesting.
Totalmente privato
Tutto gira nel tuo browser. Il tuo codice non viene mai inviato a nessun server esterno.
Funzionalità complete
Supporto completo per @variabili, mixin parametrizzati, operazioni matematiche su colori e valori.
Come funziona
Tre passaggi, senza complicazioni
Incolla il tuo LESS
Incolla il codice LESS nell'editor. Supporta variabili, mixin, operazioni, funzioni e nesting di selettori.
Compilazione nel browser
Il compilatore less.js elabora il tuo codice LESS e genera CSS valido. Tutto avviene localmente, nel tuo browser, senza inviare dati a server esterni.
Copia o scarica il CSS
Ottieni il CSS risultante pronto per qualsiasi progetto web, framework o sistema di build che richieda CSS standard.
FAQ
Hai delle domande?
LESS e SCSS sono entrambi preprocessori CSS che aggiungono variabili, mixin e nesting. La differenza principale è la sintassi per le variabili: LESS usa il prefisso @ (come @primary-color), mentre SCSS usa $ (come $primary-color). LESS viene compilato in JavaScript (sia lato client che Node.js), mentre Sass/SCSS usa Dart Sass come implementazione di riferimento. SCSS ha un modulo system più avanzato (@use/@forward); LESS è più semplice da adottare per chi conosce già CSS. Bootstrap ha usato LESS fino alla versione 3, poi è migrato a SCSS dalla versione 4.
Sì. LESS supporta il nesting dei selettori in modo simile a SCSS. Puoi annidare regole CSS all'interno di altre regole e usare il riferimento al selettore padre con &. Per esempio, .nav { &:hover { color: red; } } genera .nav:hover { color: red; }. Il nesting funziona anche per media query, pseudo-classi e pseudo-elementi.
In LESS, i mixin sono classi o selettori che puoi includere in altre regole. Un mixin senza parentesi (.clearfix) viene incluso nel CSS finale come classe ordinaria oltre che come mixin. Un mixin con parentesi vuote (.clearfix()) non viene incluso come classe ma solo riusato. I mixin possono avere parametri con valori predefiniti: .border-radius(@radius: 5px) { border-radius: @radius; }. I mixin variadic accettano un numero variabile di argomenti tramite @arguments.
Sì. LESS supporta operazioni aritmetiche (+, -, *, /) su valori numerici, colori e variabili. Puoi scrivere @base: 5%; @height: @base * 2; e LESS calcolerà il risultato. Funziona anche con colori: @dark-blue: @blue + #111; mescola i canali cromatici. Le funzioni integrate di LESS includono lighten(), darken(), mix(), fade(), saturate() e molte altre per manipolare colori e valori.
Sì. Questo strumento usa less.js, lo stesso compilatore usato da Bootstrap 3. Se hai file LESS di Bootstrap 3 o temi basati su di esso, la compilazione avverrà correttamente. Bootstrap 3 usava ampiamente variabili (@brand-primary, @font-size-base), mixin (.border-radius(), .clearfix()) e il sistema a griglia parametrizzato, tutti supportati pienamente.
No. Il compilatore less.js gira interamente nel tuo browser. Il tuo codice LESS non viene mai trasmesso a server esterni. Puoi usare questo strumento in modo completamente privato anche su reti non sicure.
Converti LESS in CSS: compilatore online gratuito
LESS (Leaner Style Sheets) è un preprocessore CSS che estende il linguaggio con variabili (@primary: #4a90e2), nesting dei selettori, mixin riutilizzabili, operazioni matematiche e funzioni per la manipolazione di colori. Nato nel 2009, LESS è stato reso popolare da Bootstrap 3 (che lo usava come sistema di theming) e da decine di framework e librerie UI. A differenza di Sass/SCSS, LESS viene compilato in JavaScript — sia nel browser tramite less.js, sia lato server tramite Node.js. Questo strumento usa less.js direttamente nel browser tramite WebAssembly, senza richiedere alcuna configurazione locale.
La compilazione LESS nel browser copre scenari pratici frequenti: fare debug di variabili e mixin senza configurare un ambiente Node.js, testare snippet LESS trovati in documentazioni o temi di terze parti, convertire file LESS di Bootstrap 3 in CSS standard per riutilizzarli in progetti senza un sistema di build, o verificare rapidamente il comportamento di operazioni matematiche su colori (@link-color + #111). È uno strumento utile anche in fase di migrazione da LESS a SCSS, per confrontare l'output CSS generato dai due compilatori partendo dallo stesso codice.
Anche se SCSS ha preso il sopravvento come preprocessore dominante (Bootstrap 4 e successivi usano SCSS), LESS rimane ampiamente in uso in progetti legacy, temi WordPress, template amministrativi e codebase aziendali che non hanno ancora effettuato la migrazione. La curva di apprendimento di LESS è minima per chi conosce CSS: la sintassi è praticamente identica a CSS, con l'aggiunta delle @ per le variabili. Questo strumento permette di lavorare con file LESS esistenti senza dover installare Node.js o configurare pipeline di build, utile per manutenzione rapida o per esplorare codebase di terze parti.