A einhver fjöldi af hönnuðum nota einhvers konar CSS fyrir örgjörva, hvort sem það er Sass , LESS eða Stíll . Ef þú hefur notað eitthvað af þessum, þá ertu líklega einnig meðvitaður um að Compass sé rammur byggður á Sass og þótt uppsetningu þess gæti verið afþreifanleg, þegar þú notar það muntu fljótt uppgötva að það sé ein besta kunnáttu vefur hönnuður getur lært.
Ef þú hefur aldrei notað Sass áður, þá mæli ég með að þú sért að skoða WDD kynning á Sass.
Compass virkar eins og ramma fyrir CSS þinn. Þegar þú ert að vinna í stórum verkefnum er auðvelt að fá það úr hendi og oft að finna hluti í eigin CSS er áskorun. Compass reynir að takast á við þessi vandamál, með aukinni ávinningi af því að vinna með seljandaforskeyti.
Eins og ég sagði hér að framan, Compass er ramma fyrir CSS þinn sem leysa nokkur vandamál með tungumálið. Það felur einnig í sér nokkra verkfæri til að gera þróun hraðar og auðveldari:
Eins og Sass og LESS, Compass er bara tól til að gera vefhönnun einfaldari.
Áttavita er Ruby gem, svo í því skyni að setja upp það þarftu fyrst að hafa Ruby uppsett á vélinni þinni. Til allrar hamingju Ruby uppsetningu er einfalt, á Windows þú þarft bara að hlaða niður þessu Ruby Installer fyrir Windows , á Mac / Linux fylgja leiðbeiningunum á Ruby staður.
Þegar þú hefur Ruby uppsett, er að setja áttavita eins auðvelt og þetta:
gem install compassÞetta mun setja bæði Compass og Sass.
Ef þú vilt búa til Compass verkefni, þá ættirðu að slá inn:
compass create /path/to/projectcd /path/to/projectcompass watchÞessir þrír línur af kóða þýða að hvenær sem þú breytir Sass skrá þá verða þær sjálfkrafa teknar saman í CSS.
Að öðrum kosti gætir þú notað Codekit (Mac) eða Prepros (Windows) til að safna Sass þegar það er vistað.
Áttaviti skiptist í einingar og til að byrja að nota tólin þurfum við fyrst að flytja inn eininguna sem við viljum inn í aðal .scss skrá okkar. Til dæmis, til að flytja inn CSS3 mátin sem við viljum nota:
@import "compass/css3";Nú getum við byrjað að nota tólin og mixins sem Compass býður upp á fyrir nýja eiginleika sem fylgdu CSS3. Það besta við þetta er að við þurfum ekki að slá inn seljandaforskeyti aftur og aftur, sem hefur alltaf verið vandamál þegar kemur að CSS3.
Hér er dæmi um að ef við viljum búa til einfalda 3 dálkaútgáfu með 20px Göturæsi, í CSS þurfum við að slá inn:
div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}Þú getur séð hvernig óviðráðanlegt sem gerir kóðann okkar fljótt. Með hjálp Compass og Sass allt sem við þurfum er þetta:
div{@include column-count(3);@include column-gap(20px);}Eins og þú sérð höfum við fjarlægt seljandaforskeyti og hvað tóku 6 línur af CSS við náðum í aðeins 2.
Annað dæmi um CSS sem krefst mikils að slá inn er stig. Hérna er hvernig við skrifum einfaldan hvítt til svartan hallandi í CSS:
.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);}Búa til sömu áhrif með Compass er eins einfalt og:
.gradient{@include background-image(linear-gradient(#fff, #000));}Ekki eini minnkar þetta verulega magn kóðans, en ef þú vilt breyta litunum, í Compass útgáfu þarftu aðeins að breyta þeim einu sinni.
Það er fullt listi yfir styttri CSS3 eiginleika hér.
Compass felur einnig í sér nokkrar aðstoðarmenn til tengla, einn þeirra er rauntíma-bjargvættur. Í fyrsta lagi þurfum við að taka upp typography líkanið sem upphaf aðal Sass skrá okkar:
@import "compass/typography"The typography mát hefur mikla skothylki fyrir stíl litum, eins og svo:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}Þetta er það besta við Compass; Það tekur kóðann sem við notum daglega og gefur okkur stuttar útgáfur.
Þessi grein var bara fljótleg kynning á Compass, en ef þú fannst efnið eins spennandi og ég gerði þá myndi ég eindregið ráðleggja þér að kíkja á heimasíðu þeirra og kanna meira af tólunum sem eru í boði.
Ég vona að þú munir nú íhuga að nota Compass og Sass í verkefnum þínum, vegna þess að þau eru í raun ótrúleg viðbót við verkfærakistu vefhönnuðarinnar.
Notar þú Compass eða Sass? Viltu frekar fyrirfram örgjörva? Láttu okkur vita í athugasemdunum.