CleanCSS è un semplice linguaggio divinatorio per CSS ispirato CleverCSS ma più semplice e con meno funzioni ostruttive.
Perché
Mi è piaciuto molto l'idea dietro CleverCSS ma quando viene utilizzato per la produzione mi sono reso conto che stavo cercando di allontanarsi dal suo parser fuggendo archi e le proprietà CSS supportate troppo spesso. Utilizzando prefissi vendor come -webkit-gradiente e valori come rgba ha comportato un CSS disordinato, così ho deciso di scrivere il mio parser per una sintassi simile, senza tutte le caratteristiche complesse che non ho usato comunque e subito funziona bene per me in siti web moderni REALI.
Esempi di Sintassi
Ho intenzione di mantenere gli esempi CleverCSS dove possibile, in quanto la sintassi è veramente simile.
Un piccolo esempio di seguito. Si noti la sintassi basata rientro e come si può annidare regole:
#header, #footer:
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; margin: 0
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; padding: da 0
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; font->
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; famiglia: Verdana,-serif sans
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; dimensioni: .9em
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; li:
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; padding: 0.4em
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; margin: 0 0.8em 0.8em
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; h3:
font-size: 1.2em
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; p:
padding: 0.3em
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; p.meta:
text-align: right
colore: #ddd
Naturalmente si può fare lo stesso in CSS, ma a causa della sua natura pianeggiante del codice sarà più prolisso. Il seguente pezzo di codice è l'uscita CleanCSS del file di cui sopra:
#header, #footer {
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; margin: 0;
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; padding: 0;
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; font-family: Verdana, sans-serif
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; font-size: .9em
}
#header li,
#footer li {
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; padding: 0.4em;
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; margin: 0 0.8em 0.8em;
}
#header li h3,
#footer li h3 {
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; font-size: 1.2em;
}
#header li p,
#footer li p {
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; padding: 0.3em;
}
#header li p.meta,
#footer li p.meta {
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; text-align: right;
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; colore: #dddddd;
}
Utilizzo Biblioteca
Importare il modulo CleanCSS e chiamare la funzione con un oggetto simile a file convert ().
Esempio:
importazione CleanCSS
con open ('file.css') come f:
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cleancss.convert stampa (f)
Utilizzo della riga di comando
Chiamare il cleancss.py senza parametri per visualizzare le istruzioni per l'uso. Passare qualsiasi numero di file da cleancss.py e lo script convertirà i file CSS e stampare il risultato alla console.
Esempio:
cleancss.py file.css> result.css
Requisiti
- Python
I commenti non trovato