Mange designere bruger en slags CSS-forprocessor, uanset om det er det Sass , MINDRE eller Stylus . Hvis du har brugt nogen af disse, er du sikkert også klar over, at Compass er en ramme bygget på Sass, og selvom installationen er muligvis off-putting, når du bruger det, vil du hurtigt opdage, at det er en af de bedste evner nogen webdesigner kan lære.
Hvis du aldrig har brugt Sass før, vil jeg anbefale at du kigger på WDDs Introduktion til Sass.
Kompas fungerer som en ramme for din CSS. Når du arbejder på et stort projekt, er det nemt for ting at komme ud af hånden og ofte at finde ting i dit eget CSS er en udfordring. Kompas forsøger at løse disse problemer, med den ekstra fordel at arbejde med sælgerpræfikser.
Som jeg sagde ovenfor, er Compass en ramme for dit CSS, der løser nogle af problemerne med sproget. Det indeholder også et par værktøjer til at gøre udviklingen hurtigere og nemmere:
Compass er ligesom Sass og LESS kun et redskab til at gøre website design enklere.
Kompas er en Ruby perle, så for at installere det skal du først have Ruby installeret på din maskine. Heldigvis er Ruby-installationen enkel, på Windows behøver du bare at downloade dette Ruby Installer til Windows , på Mac / Linux følg instruktionerne på Ruby site.
Når du har installeret Ruby, er det lige så nemt at installere kompas:
gem install compassDette vil installere både Compass og Sass.
Hvis du vil oprette et Compass-projekt, skal du skrive:
compass create /path/to/projectcd /path/to/projectcompass watchDisse tre linjer med kode betyder, at når du ændrer en Sass-fil, bliver de automatisk samlet i CSS.
Alternativt kan du bruge Codekit (Mac) eller Prepros (Windows) til at kompilere Sass, når den er gemt.
Kompas er opdelt i moduler og for at kunne begynde at bruge dets værktøjer skal vi først importere det modul, vi ønsker i vores største .scss-fil. For eksempel at importere CSS3 modulet, vi ville bruge:
@import "compass/css3";Nu kan vi begynde at bruge værktøjerne og mixins, som Compass tilbyder til de nye egenskaber, der fulgte med CSS3. Det allerbedste ved dette er, at vi ikke behøver at skrive leverandørpræfikser igen og igen, hvilket altid har været et problem, når det kommer til CSS3.
Her er et eksempel, hvis vi ønskede at oprette et simpelt 3 kolonne layout med en 20px rende, i CSS skulle 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 der hurtigt gør vores kode. Med hjælp fra Compass og Sass er alt, hvad vi har brug for, dette:
div{@include column-count(3);@include column-gap(20px);}Som du kan se, har vi fjernet sælgerpræfikserne, og hvad tog 6 linjer af CSS vi opnåede på kun 2.
Et andet eksempel på CSS, der kræver meget at skrive, er gradienter. Sådan kan vi skrive en simpel hvid til sort 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);}At skabe samme effekt med Compass er så simpelt som:
.gradient{@include background-image(linear-gradient(#fff, #000));}Dette reducerer ikke kun mængden af kode betydeligt, men hvis du vil ændre farverne, skal du kun ændre dem en gang i Compass-versionen.
Der er en komplet liste over forkortede CSS3 egenskaber her.
Kompas indeholder også nogle hjælpere til links, hvoraf den ene er en real-time-saver. For det første skal vi inkludere typografimodellen som starten på vores primære Sass-fil:
@import "compass/typography"Typografimodulet har stor stenografi for stylingfarver, som sådan:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}Dette er det bedste ved Compass; det tager koden vi bruger dagligt og giver os kortfattede versioner.
Denne artikel var bare en hurtig introduktion til Compass, men hvis du fandt emnet så spændende som jeg, så vil jeg stærkt anbefale dig at tjek deres hjemmeside og udforske flere af de værktøjer, der er tilgængelige.
Jeg håber du vil overveje at bruge Compass og Sass i dine projekter, fordi de virkelig er utrolige tilføjelser til webdesigners værktøjskasse.
Bruger du Compass eller Sass? Foretrækker du en anden forprocessor? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, kompasbillede via Shutterstock.