CleanCSS on yksinkertainen pythonic kieli CSS innoittamana CleverCSS mutta yksinkertaisempi ja vähemmän obstruktiivinen ominaisuuksia.
Miksi
Tykkäsin ajatus CleverCSS mutta kun käytetään tuotannossa tajusin, että olin yrittää päästä pois sen parser pakenemalla jousille ja tueta CSS-ominaisuuksia aivan liian usein. Käyttämällä myyjä etuliitteitä kuten -webkit-kaltevuus ja arvoja, kuten RGBA johti sotkuinen CSS, joten päätin kirjoittaa oman jäsennin samanlainen syntaksin ilman kaikkia monimutkaisia ominaisuuksia, jotka en käyttänyt joka tapauksessa ja se nyt toimii hyvin minulle REAL moderni verkkosivustoja.
Syntax esimerkkejä
Aion pitää CleverCSS esimerkit mahdollisuuksien koska syntaksi on todella samankaltainen.
Pieni esimerkki alla. Huomaa sisennys perustuva syntaksi ja miten voit pesä sääntöjä:
#header, #footer:
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; margin: 0
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; täyte: 0
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; font>
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; perhe: Verdana, sans-serif
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; size: .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: oikea
väri: #ddd
Tietysti voit tehdä aivan sama CSS, mutta koska se tasainen luonne koodi näyttäisi yksityiskohtaisempi. Seuraavat koodinpätkä on CleanCSS lähtö yllä tiedostoa:
#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 s,
#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: oikea;
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; väri: #dddddd;
}
kirjasto käyttöä
Tuo cleancss moduuli ja soittaa muuntaa () toiminto tiedostojen kaltainen esine.
Esimerkki:
tuonti cleancss
avoimet ('file.css') kuin f:
& Nbsp, & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; print cleancss.convert (f)
Command line-käyttöä
Soita cleancss.py ilman parametreja näyttää käyttöohjeita. Pass tahansa tiedostojen määrä cleancss.py ja skripti muuntaa tiedostot CSS ja tulostaa tuloksen konsoliin.
Esimerkki:
cleancss.py file.css> result.css
vaatimukset
- Python
Kommentteja ei löytynyt