🎨 Compilatore LESS in CSS

Incolla il codice LESS per compilarlo subito in CSS usando il motore ufficiale less.js. Supporta variabili (@var), nesting, mixin, operazioni e funzioni integrate.

🔒 La compilazione avviene interamente nel tuo browser: il tuo codice non viene mai inviato a un server. Anche il bundle less.js è servito da questo sito, non da un CDN.

Input LESS

Output CSS

Altri strumenti per sviluppatori

🧾 Formattatore JSON 🗄️ Formattatore SQL ⚛️ Convertitore SVG → JSX

GUIDA

Scopri di piu

1. Cos’è LESS

LESS (Leaner Style Sheets) è un preprocessore CSS che aggiunge funzioni di programmazione al CSS: variabili, nesting, mixin e operazioni. I browser comprendono solo il CSS standard, quindi LESS deve essere compilato in CSS prima del deployment. Questo strumento esegue nel tuo browser il motore ufficiale less.js per effettuare la conversione all’istante.

2. Funzionalità principali

Gestisci colori e dimensioni in un unico punto con le variabili (@brand: #4A90D9;), e rispecchia la struttura del markup annidando i selettori. Crea blocchi di stile riutilizzabili con i mixin (.rounded(6px)) e usa operazioni aritmetiche come (@pad * 2) insieme alle funzioni colore integrate come darken() e lighten().

3. Compilazione nel browser e sicurezza

Questo strumento compila interamente nel browser e non carica mai il tuo input. Per sicurezza, la funzionalità JavaScript inline di LESS (sintassi con backtick) è disabilitata, quindi funziona in modo sicuro senza eval. Per progetti grandi, integra LESS nella tua pipeline di build (webpack, Vite, lessc, ecc.).

Domande frequenti

Il mio codice LESS viene inviato a un server?

No. La compilazione avviene interamente nel JavaScript del tuo browser e il codice non viene inviato da nessuna parte.

Posso usare @import per caricare file esterni?

Nel browser, l’accesso ai file esterni è limitato, quindi un @import remoto potrebbe non funzionare. Questo strumento è pensato soprattutto per compilare snippet in un singolo file.

Posso usare JavaScript inline di LESS (backtick)?

No. La funzionalità di valutazione JavaScript è disabilitata per sicurezza. Tutte le funzionalità standard - variabili, mixin, operazioni - funzionano normalmente.

Compila anche SCSS/Sass?

No, questo strumento supporta solo LESS. LESS e SCSS hanno sintassi diverse.