Convertitore Less a CSS
Converti codice Less in CSS compatibile con il browser
Input Less
CSS Compilato
Esempi Less a CSS
Le variabili, i mixin e il nesting di Less vengono compilati in CSS standard. Esempio:
Variabili, mixin e selettori annidati
Input Less:
CSS Compilato:
Usa Esempio sopra per caricare altri dati di esempio.
Cos'è Less a CSS?
Less è un preprocessore CSS che aggiunge variabili, nesting, mixin e funzioni. I browser non eseguono Less — richiedono CSS standard. Questo strumento compila il tuo Less in CSS pronto per il browser. La documentazione Less definisce la sintassi.
La compilazione funziona interamente nel tuo browser. Nulla viene inviato a un server. L'output è CSS standard. Per la direzione inversa (CSS a Less) usa CSS a Less. Per SCSS usa SCSS a CSS.
Come Usare Questo Strumento
Incolla o Carica Less
Copia il tuo Less e incollalo nell'editor sinistro. Puoi anche cliccare su Carica per caricare un file .less o .css. Il pulsante Esempio carica dati di esempio. Less non valido mostra un errore.
Visualizza il CSS Compilato
Il pannello destro mostra il CSS compilato. Le variabili vengono risolte, il nesting viene appiattito e i mixin vengono espansi. L'output è CSS standard utilizzabile da qualsiasi browser.
Copia o Scarica
Usa Copia o Scarica. Per formattare l'output usa CSS Formatter. Per minificare usa CSS Minifier.
Quando Less a CSS è Utile
Quando hai Less da un progetto (es. Bootstrap 3, Ant Design) o da una codebase legacy ma hai bisogno di CSS standard — per un test rapido, deployment su CDN o sistemi senza strumenti di build — questa compilazione aiuta. Utile anche per il debug: vedi esattamente quale CSS produce il tuo Less.
Less è usato da molti progetti legacy e alcuni framework UI. Se personalizzi variabili o estrai stili, compilare qui ti dà il CSS finale. Per convertire CSS esistente in struttura Less usa CSS a Less.
Domande Frequenti
Less vs SCSS?
Entrambi aggiungono variabili, nesting e mixin. Less usa & per i selettori padre; anche SCSS. La sintassi differisce leggermente. Scegli in base al tuo progetto.
Supporta @import?
Gli import potrebbero non essere risolti se i file non sono caricati. Per progetti multi-file usa il compilatore Less ufficiale o il tuo bundler.
I miei dati sono privati?
Sì. La compilazione funziona interamente nel tuo browser. Nessun dato viene inviato a nessun server.
Come vengono gestiti mixin e funzioni?
I mixin e le funzioni integrate (es. lighten(), darken()) vengono espansi durante la compilazione. Il CSS di output contiene i valori risolti.
Posso usarlo con Bootstrap 3?
Bootstrap 3 usa Less. Per la compilazione completa di Bootstrap usa la build ufficiale. Questo strumento funziona per Less a file singolo o snippet.
Strumenti Correlati
Per Less: lesscss.org e uso di Less. MDN CSS e W3C CSS definiscono il formato di output.