Mange designere bruker en slags CSS preprosessor, uansett om det er det sass , MINDRE eller Stylus . Hvis du har brukt noen av disse, er du sannsynligvis også klar over at Compass er et rammeverk som er bygd på Sass, og selv om installasjonen er mulig, vil du raskt oppdage at det er en av de beste ferdighetene webdesigner kan lære.
Hvis du aldri har brukt Sass før, vil jeg anbefale at du tar en titt på WDDs Introduksjon til Sass.
Kompass fungerer som et rammeverk for CSS. Når du jobber med et stort prosjekt, er det lett for ting å gå ut av hånden, og ofte å finne ting i ditt eget CSS er en utfordring. Kompass forsøker å løse disse problemene, med den ekstra fordelen av å jobbe med leverandørprefikser.
Som jeg sa ovenfor, er Compass et rammeverk for CSS som løser noen av problemene med språket. Den inneholder også et par verktøy for å gjøre utviklingen raskere og enklere:
Som Sass og mindre, er Compass bare et verktøy for å gjøre webdesign enklere.
Kompass er en Ruby perle, så for å installere den må du først ha Ruby installert på maskinen din. Heldigvis er Ruby-installasjonen enkel, på Windows trenger du bare å laste ned dette Ruby Installer For Windows , på Mac / Linux følg instruksjonene på Ruby nettsted.
Når du har installert Ruby, er installering av kompass like enkelt som dette:
gem install compassDette vil installere både Compass og Sass.
Hvis du vil opprette et kompass-prosjekt, vil du da skrive:
compass create /path/to/projectcd /path/to/projectcompass watchDisse tre kodelinjene betyr at når du endrer en Sass-fil, blir de automatisk kompilert til CSS.
Alternativt kan du bruke Codekit (Mac) eller Prepros (Windows) for å kompilere Sass når den er lagret.
Kompass er delt inn i moduler, og for å kunne begynne å bruke verktøyene må vi først importere modulen vi ønsker i vår viktigste. CSV-fil. For eksempel, for å importere CSS3-modulen, ville vi bruke:
@import "compass/css3";Nå kan vi begynne å bruke verktøyene og mixins som Compass tilbyr for de nye egenskapene som fulgte med CSS3. Det aller beste ved dette er at vi ikke trenger å skrive leverandørprefikser igjen og igjen, noe som alltid har vært et problem når det gjaldt CSS3.
Her er et eksempel, hvis vi ønsket å lage en enkel 3 kolonne layout med en 20px renn, i CSS måtte vi skrive:
div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}Du kan se hvor uhåndterlig det som raskt gjør vår kode. Med hjelp av Compass og Sass trenger vi alt dette:
div{@include column-count(3);@include column-gap(20px);}Som du kan se, har vi fjernet leverandørprefiksetene, og hva tok 6 linjer med CSS vi oppnådde på bare 2.
Et annet eksempel på CSS som krever mye å skrive, er gradienter. Slik viser vi en enkel hvit til svart gradient i 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);}Å skape den samme effekten med Compass er like enkelt som:
.gradient{@include background-image(linear-gradient(#fff, #000));}Ikke bare reduserer dette signifikant mengden kode, men hvis du vil endre fargene, må du bare endre dem i kompassversjonen.
Det er en fullstendig liste over forkortet CSS3 egenskaper her.
Kompass inneholder også noen hjelpere for koblinger, hvorav en er en sanntidssparer. Først må vi inkludere typografimodellen som starten på vår viktigste Sass-fil:
@import "compass/typography"Typografimodulen har stor stenografi for stylingfarger, slik som:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}Dette er det beste med Compass; Det tar koden vi bruker daglig og gir oss korte versjoner.
Denne artikkelen var bare en rask introduksjon til Compass, men hvis du fant emnet så spennende som jeg, så anbefaler jeg deg sterkt sjekk ut deres hjemmeside og utforske flere av verktøyene som er tilgjengelige.
Jeg håper du vil nå vurdere å bruke Compass og Sass i prosjektene dine, fordi de virkelig er utrolig tillegg til webdesignerens verktøykasse.
Bruker du Compass eller Sass? Foretrekker du en annen forprosessor? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, kompassbilde via Shutterstock.