Monet suunnittelijat käyttävät jonkinlaista CSS-esiprosessoria, olipa kyse nenäkkyys , VÄHEMMÄN tai neula . Jos olet käyttänyt jotain näistä, olet varmaankin tietoinen siitä, että Compass on kehys, joka on rakennettu Sassille ja vaikka sen asennus saattaa olla pois käytöstä, kun käytät sitä, huomaat pian, että se on yksi parhaista taidoista web-suunnittelija voi oppia.
Jos et ole koskaan käyttänyt Sassia ennen, suosittelen, että katsot WDD: t johdatus Sassille.
Kompassi toimii kuten kehys CSS: lle. Kun olet tekemässä suurta hanketta, on helppoa, että asiat päästävät käsistä ja usein löytyvät asioita omassa CSS: ssä on haaste. Kompassi pyrkii ratkaisemaan nämä ongelmat ja lisäetuna työskennellessä myyjän etuliitteiden kanssa.
Kuten edellä mainitsin, Compass on kehys CSS: lle, joka ratkaisee joitain kieleen liittyviä ongelmia. Se sisältää myös muutamia työkaluja kehityksen nopeuttamiseksi ja helpottamiseksi:
Kuten Sass ja LESS, Compass on vain työkalu, jolla verkkosivustojen suunnittelu yksinkertaistuu.
Kompassi on Ruby-helmi, joten jos haluat asentaa sen, sinun on ensin asennettava Ruby laitteeseen. Onneksi Ruby-asennus on yksinkertainen, Windowsissa sinun tarvitsee vain ladata tämä Ruby Installer Windowsille , Macissa / Linuxissa noudata ohjeita Ruby-sivusto.
Kun Ruby on asennettu, kompassin asentaminen on yhtä helppoa kuin tämä:
gem install compassTämä asentaa sekä Compassin että Sassin.
Jos haluat luoda Compass-projektin, kirjoita sitten:
compass create /path/to/projectcd /path/to/projectcompass watchNämä kolme riviä koodia tarkoittavat, että milloin tahansa muutat Sass-tiedostoa, ne kootaan automaattisesti CSS: ään.
Vaihtoehtoisesti voit käyttää Codekit (Mac) tai Prepros (Windows), kun Sass tallentuu.
Kompassi on jaettu moduuleihin ja aloita apuohjelmiensa käyttämiseksi ensin tuoda haluttu moduuli tärkeimpään .scss-tiedostoon. Esimerkiksi CSS3-moduulin tuominen käyttämään:
@import "compass/css3";Nyt voimme aloittaa Compassin tarjoamat apuohjelmat ja mixinit CSS3: n mukana tulleille uusille ominaisuuksille. Paras asia tässä on, että meidän ei tarvitse kirjoittaa myyjän etuliitteitä uudestaan ja uudestaan, mikä on aina ollut ongelma CSS3: ssa.
Tässä on esimerkki, jos halusimme luoda yksinkertaisen 3 sarakkeen ulkoasun, jossa on 20px-kouru, CSS: ssä meidän pitäisi kirjoittaa:
div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}Näet, kuinka hallitsematon, joka tekee nopeasti koodimme. Compassin ja Sassin avulla tarvitsemme vain tämän:
div{@include column-count(3);@include column-gap(20px);}Kuten näette, olemme poistaneet myyjän etuliitteet ja mikä kesti 6 riviä CSS: ää, jonka saavutimme vain kahdessa.
Toinen esimerkki CSS: stä, joka vaatii paljon kirjoittamista, on kaltevuudet. Näin kirjoitamme yksinkertaisen valkoisen tai mustan gradientin CSS: ssä:
.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}Sama vaikutus Compassin kanssa on yhtä yksinkertainen kuin:
.gradient{@include background-image(linear-gradient(#fff, #000));}Tämä ei vähennä pelkästään koodin määrää, mutta jos haluat muuttaa värejä, Compass-versiossa sinun tarvitsee vain vaihtaa ne kerran.
Täydellinen luettelo lyhennetään CSS3-ominaisuuksia täällä.
Kompassi sisältää myös joitain linkkejä apuaineita, joista yksi on todellinen säästäjä. Ensinnäkin typografiamalli on sisällytettävä tärkeimpänä Sass-tiedostona:
@import "compass/typography"Typografiamoduulilla on hyvin lyhyt muotoiluvärejä, kuten:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}Tämä on paras asia Compassista; se käyttää koodia jota käytämme päivittäin ja antaa meille lyhennettyjä versioita.
Tämä artikkeli oli vain lyhyt esittely Compassille, mutta jos löysit aiheen niin jännittävältä kuin minä, suosittelen sinua vahvasti tarkista heidän verkkosivuillaan ja tutkia enemmän saatavilla olevia apuohjelmia.
Toivottavasti nyt harkitset Compassin ja Sassin käyttöä projekteissasi, koska ne ovat todella uskomattomia lisäyksiä web-suunnittelija työkalupakkiin.
Käytätkö Compassia tai Sassia? Haluatko mieluummin toisen esiprosessorin? Kerro meille kommentit.
Esitetty kuva / pikkukuva, kompassikuva kautta Shutterstock.