Många designers använder någon form av CSS-förprocessor, oavsett om det är det sass , MINDRE eller Nål . Om du har använt någon av dessa är du noga medveten om att Compass är ett ramverk byggt på Sass, och även om installationen kan vara avskräckande, så snart du använder det kommer du snabbt att upptäcka att det är en av de bästa färdigheterna någon webbdesigner kan lära sig.
Om du aldrig har använt Sass tidigare, rekommenderar jag att du tar en titt på WDDs introduktion till Sass.
Kompass fungerar som en ram för din CSS. När du jobbar med ett stort projekt är det lätt att saker att komma ur hand och ofta hitta saker i din egen CSS är en utmaning. Kompass försöker ta itu med dessa problem, med den extra fördelen av att arbeta med leverantörs prefix.
Som jag sa ovan är Compass en ram för din CSS som löser några av problemen med språket. Det innehåller också några verktyg för att göra utvecklingen snabbare och enklare:
Liksom Sass och LESS är Compass bara ett verktyg för att göra webbdesign enklare.
Kompass är en Ruby-pärla, så för att installera den måste du först ha Ruby installerad på din maskin. Lyckligtvis Ruby installation är enkelt, på Windows behöver du bara ladda ner det här Ruby Installer For Windows , på Mac / Linux följ instruktionerna på Ruby plats.
När du har installerat Ruby installeras kompass så enkelt som det här:
gem install compassDetta kommer att installera både Compass och Sass.
Om du vill skapa ett kompass-projekt skriver du då:
compass create /path/to/projectcd /path/to/projectcompass watchDessa tre koder innebär att när du ändrar en Sass-fil, kommer de automatiskt att kompileras till CSS.
Alternativt kan du använda Codekit (Mac) eller Prepros (Windows) för att kompilera Sass när den är sparad.
Kompass är uppdelad i moduler och för att kunna börja använda dess verktyg måste vi först importera modulen vi vill ha i vår huvudsakliga .scss-fil. Till exempel, för att importera CSS3-modulen skulle vi använda:
@import "compass/css3";Nu kan vi börja använda verktygen och mixins som Compass erbjuder för de nya egenskaperna som följde med CSS3. Det allra bästa med detta är att vi inte behöver skriva säljarprefix om och om igen, vilket alltid har varit ett problem när det gäller CSS3.
Här är ett exempel, om vi ville skapa en enkel 3 kolumnlayout med en 20px rännan, skulle vi behöva skriva i CSS:
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 hur omanagliga som snabbt gör vår kod. Med hjälp av Compass och Sass behöver vi bara det här:
div{@include column-count(3);@include column-gap(20px);}Som du kan se har vi tagit bort säljarprefix, och vad tog 6 rader av CSS som vi åstadkom på bara 2.
Ett annat exempel på CSS som kräver mycket typing är gradienter. Så här skriver vi en enkel vit till 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);}Att skapa samma effekt med Compass är lika enkelt som:
.gradient{@include background-image(linear-gradient(#fff, #000));}Det här reducerar inte bara mängden kod avsevärt, men om du vill ändra färgerna behöver du bara ändra dem en gång i kompassversionen.
Det finns en fullständig lista över förkortade CSS3 egenskaper här.
Kompass innehåller också några hjälpmedel för länkar, varav en är en realtidssparare. Först måste vi inkludera typografimodellen som början på vår huvudsakliga Sass-fil:
@import "compass/typography"Typografimodulen har stor stenografi för stylingfärger, som så:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}Det här är det bästa med Compass; Det tar koden vi använder dagligen och ger oss kortversioner.
Denna artikel var bara en snabb introduktion till Compass, men om du hittade ämnet så spännande som jag, så rekommenderar jag dig starkt att kolla in deras hemsida och utforska mer av de verktyg som finns tillgängliga.
Jag hoppas att du nu kommer att överväga att använda Compass och Sass i dina projekt, för att de verkligen är otroliga tillägg till webbdesignerens verktygslåda.
Använder du kompass eller sass? Föredrar du en annan förprocessor? Låt oss veta i kommentarerna.