Convertitore CSS a Less
Converti codice CSS in Less con annidamento
CSS di input
Less convertito
Esempi CSS a Less
I selettori CSS piatti vengono convertiti in Less annidato. Esempio:
Struttura annidata da CSS piatto
CSS di input:
Less convertito:
Usa Esempio in alto per caricare altri dati di esempio.
Cos'è CSS a Less?
Less è un preprocessore CSS che aggiunge variabili, annidamento e mixin. La conversione da CSS normale a Less lo ristruttura con annidamento e lo prepara per le funzionalità Less. Questo strumento analizza il tuo CSS e produce una struttura in stile Less. Le specifiche W3C CSS definiscono la sorgente; Less definisce l'output.
La conversione avviene interamente nel tuo browser. Nulla viene inviato a un server. L'output è Less valido. Per la direzione inversa (Less a CSS), usa Less in CSS. Per SCSS, usa CSS a SCSS.
Come usare questo strumento
Incolla o carica CSS
Copia il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Carica per caricare un file .css. Il pulsante Esempio carica dati di esempio. Il CSS non valido mostrerà un errore.
Esamina l'output Less
Il pannello di destra mostra il Less convertito. I selettori possono essere annidati dove la struttura lo permette. Puoi aggiungere variabili e mixin manualmente dopo la conversione.
Copia o scarica
Usa Copia o Scarica. Compila il Less con Less in CSS per verificare. Per formattare prima il CSS, usa il Formattatore CSS.
Quando CSS a Less è utile
Quando si migra un progetto da CSS normale a Less, o quando si ha CSS da un'esportazione di design e si vuole integrarlo in un codebase basato su Less (es. Bootstrap 3, Ant Design), questa conversione fornisce un punto di partenza. Strumenti di build come webpack e Gulp compilano Less. L'output ti dà una struttura annidata che puoi perfezionare con variabili e mixin.
Gli strumenti di design spesso esportano CSS normale. Convertirlo qui in Less ti permette di aggiungerlo a una struttura basata su componenti. Per SCSS invece, usa CSS a SCSS. Per i prefissi vendor, usa il Prefissatore CSS.
Domande Frequenti
Aggiunge variabili o mixin?
Il convertitore si concentra sulla struttura (annidamento). Non estrae automaticamente i valori ripetuti in variabili. Aggiungi variabili e mixin manualmente in base alle tue esigenze.
I miei dati sono privati?
Sì. La conversione avviene interamente nel tuo browser. Nessun dato viene inviato a un server.
Come funziona l'annidamento?
Lo strumento deduce l'annidamento dalle relazioni tra i selettori (es. .parent .child diventa annidato). I selettori complessi potrebbero rimanere piatti. Esamina e adatta secondo le necessità.
Less vs SCSS?
Entrambi aggiungono variabili, annidamento e mixin. Less è usato da Bootstrap 3, Ant Design. SCSS è usato da Bootstrap 4+, molti framework moderni. Scegli in base al tuo stack.
Posso compilare l'output?
Sì. Incolla il Less in Less in CSS per compilare e verificare. L'output dovrebbe corrispondere alla struttura del tuo CSS originale.
Strumenti Correlati
Per Less, vedi lesscss.org. W3C CSS e MDN CSS definiscono il formato sorgente. Bootstrap. webpack. Figma.