CleanCSS er en enkel Pytonske språk for CSS inspirert av CleverCSS men enklere og med mindre hindrende funksjoner.
Hvorfor
Jeg likte ideen bak CleverCSS men når det brukes i produksjonen skjønte jeg at jeg prøvde å komme seg bort fra sin parser ved å rømme strenger og støttes CSS egenskaper altfor ofte. Bruke leverandør prefikser som -webkit-gradient og verdier som RGBA resulterte i en rotete CSS, så jeg bestemte meg for å skrive min egen parser for en lignende syntaks uten alle de komplekse funksjoner som jeg ikke bruker uansett, og det nå fungerer fint for meg i REAL moderne nettsteder.
Syntax eksempler
Jeg kommer til å holde CleverCSS eksempler der det er mulig, siden syntaksen er veldig lik.
Et lite eksempel nedenfor. Legg merke til innrykk basert syntaks og hvordan du kan neste regler:
#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; skriften>
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; family: Verdana, sans-serif
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; størrelse: .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.8em 0 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
farge: #ddd
Selvfølgelig kan du gjøre det samme i CSS, men på grunn av sin flate natur koden ville se mer ordrik. Følgende stykke kode er CleanCSS utgangen av filen ovenfor:
#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.8em 0 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; farge: #dddddd;
}
Bibliotek bruk
Importere cleancss modulen og ringe konvertere () -funksjonen med en fil lignende gjenstand.
Eksempel:
import cleancss
med åpen ('file.css') som f:
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; print cleancss.convert (f)
kommandolinje bruk
Ring cleancss.py uten parametere for å vise brukerveiledningen. Passere en rekke filer til cleancss.py og scriptet vil konvertere filene til CSS og skrive resultatet til konsollen.
Eksempel:
cleancss.py file.css> result.css
Krav
- Python
Kommentarer ikke funnet