Konwerter CSS a Less
Konwertuj codice CSS in Less con annidamento
CSS di input
Less convertito
Esempi CSS a Less
I selettori CSS piatti vengono convertiti in Less annidato. Przyklad:
Struttura annidata da CSS piatto
CSS di input:
Less convertito:
Usa Przyklad in alto per caricare altri dane 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 narzedzie 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 prawidlowy. Per la direzione inversa (Less a CSS), usa Less in CSS. Per SCSS, usa CSS do SCSS.
Come usare questo narzedzie
Incolla o carica CSS
Kopiuj il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Wczytaj per caricare un plik .css. Il pulsante Przyklad carica dane di esempio. Il CSS nieprawidlowy 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.
Kopiuj o scarica
Usa Kopiuj o Pobierz. Compila il Less con Less in CSS per verificare. Per formattare prima il CSS, usa il Formater 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. Narzedzia di build come webpack e Gulp compilano Less. L'output ti dà una struttura annidata che puoi perfezionare con variabili e mixin.
Gli narzedzia 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 do SCSS. Per i prefissi vendor, usa il Prefissatore CSS.
Czesto zadawane pytania
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 dane sono privati?
Sì. La conversione avviene interamente nel tuo browser. Nessun dato viene inviato a un server.
Jak to dziala l'annidamento?
Lo narzedzie 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.
Powiazane narzedzia
Per Less, vedi lesscss.org. W3C CSS e MDN CSS definiscono il formato sorgente. Bootstrap. webpack. Figma.