Syntactically Awesome Stylesheets Använda Kompass i Sass

I vårt senaste inlägg har vi nämnt en gång om Compass. Enligt den officiella webbplatsen beskrivs den som en open-source CSS Authoring Framework.

Kort sagt, Compass är en Sass-förlängning och, som MINDER Element of Less, har den en massa färdiga CSS3 Mixins, förutom att det också har lagt till flera andra saker som gör det till ett mer kraftfullt kompanionsverktyg till Sass. Låt oss kolla upp det.

Installera kompass

Kompass, som Sass, måste installeras i vårt system. Men om du använder en applikation som Scout App eller Compass.app, kommer det inte vara nödvändigt.

Utan dem behöver du göra det “manuellt” genom Terminal / Command Prompt. För att göra det, skriv följande kommandorad;

På Mac / Linux Terminal

 sudo gem installation kompass 

På Windows Command Prompt

 gem installation kompass 

Om installationen lyckas bör du få en anmälan som visas nedan.

Kör sedan följande kommandorad i din arbetsmapp för att lägga till Kompassprojektfiler.

 kompass init 

Vidare läsning: Kompasskommandolinjedokumentation

Kompasskonfiguration

Om du har kört det här kommandot kompass init, Du borde nu ha en fil som heter config.rb i din arbetsbok. Den här filen används för att konfigurera projektutmatningen. Till exempel kan vi ändra våra föredragna katalognamn.

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

Radera kommentarlinjen som genereras av Compass; vi sätter Sann om vi behöver kommentarer som ska skrivas ut eller falsk om det inte behöver.

 line_comments = false 

Vi kan också bestämma CSS-utgången. Det finns fyra alternativ vi kan välja :expanderat, :kompakt, :komprimeradoch : kapslade. För nu behöver vi bara det utvidgas eftersom vi fortfarande är i utvecklingsfasen.

 output_style =: expanded 

Jag tror att dessa konfigurationer kommer att räcka för de flesta projekt i allmänhet, men du kan alltid referera till den här dokumentationen, Kompasskonfigurationsreferens om du behöver fler inställningar.

Slutligen måste vi Kolla på varje fil i katalogen med den här kommandoraden;

 kompassklocka 

Kommandoraden, som i Sass, kommer att titta på alla filändringar och skapa eller uppdatera motsvarande CSS-filer. Men kom ihåg, springa den här raden efter att du har konfigurerat projektet i config.rb, annars ignoreras bara ändringarna i filen.

CSS3 Mixins

Innan vi går igenom CSS3, i vår primära .SCSS fil, måste vi importera kompassen med följande rad @ import "kompass";, Detta kommer att importera alla tillägg i Kompass. Men om vi bara behöver CSS3 kan vi också göra det mer specifikt med den här raden @import "kompass / css3".

Vidare läsning: Kompass CSS3.

Nu börjar vi skapa något med Saas och Compass. I HTML-dokumentet, förutsatt att du också har skapat en, lägger vi följande enkla markup:

Tanken är också enkel; vi kommer att skapa en roterad låda med avrundade hörn och nedanför är våra Sass nestade stilar för startaren;

 kropp bakgrundsfärg: # f3f3f3;  avsnitt bredd: 500px; marginal: 50px auto 0; div bredd: 250px; höjd: 250px; bakgrundsfärg: #ccc; marginal: 0 auto;  

Och för att få vår rektangel de rundade hörnen kan vi inkludera Compass CSS3 Mixins enligt följande:

 kropp bakgrundsfärg: # f3f3f3;  avsnitt bredd: 500px; marginal: 50px auto 0; div bredd: 250px; höjd: 250px; bakgrundsfärg: #ccc; marginal: 0 auto; @ inkludera gränsvärdet  

Detta border-radius Mixins genererar alla webbläsarprefix och som standard hörnradie kommer att vara 5px. Men vi kan också ange radien till vårt behov på detta sätt @ include border-radius (10px); .

 sektion div bredd: 250px; höjd: 250px; bakgrundsfärg: #ccc; marginal: 0 auto; -webkit-gränsen-radien: 10px; -moz-gränsen-radien: 10px; -ms-radien: 10px; -gräns-radien: 10px; gränsstråle: 10px;  

Nästa, som planen kommer vi också att rotera lådan. Det är verkligen lätt att göra det med Compass, allt vi behöver göra är att bara ringa transformationsmetoden, som så;

 kropp bakgrundsfärg: # f3f3f3;  avsnitt bredd: 500px; marginal: 50px auto 0; div bredd: 250px; höjd: 250px; bakgrundsfärg: #ccc; marginal: 0 auto; @ include border-radius (10px); @ inkludera rotera  

Denna Mixins kommer också att generera dessa tråkiga leverantörs prefix och rotationen tar som standard 45 grader. Se den genererade CSS nedan.

 sektion div bredd: 250px; höjd: 250px; bakgrundsfärg: #ccc; marginal: 0 auto; -webkit-gränsen-radien: 10px; -moz-gränsen-radien: 10px; -ms-radien: 10px; -gräns-radien: 10px; gränsstråle: 10px; -webkit-transform: rotera (45deg); -moz-transform: rotera (45deg); -ms-transform: rotera (45deg); -o-transform: rotera (45deg); transformera: rotera (45deg);  

Kompasshjälpare

En av de mest kraftfulla funktionerna i Compass är hjälparna. Enligt den officiella webbplatsen, Kompasshjälpare är funktioner som ökar de funktioner som Sass tillhandahåller. Okej, låt oss ta en titt på följande exempel för att få en klar bild.

Lägger till @ Font-face-filer

I det här exemplet kommer vi att lägga till anpassad typfamilj med @ Font-face regel. I vanlig CSS3 kan koden se ut så här nedan, bestående av fyra olika typsnitt och det är också svårt att komma ihåg för vissa människor.

 @ font-face font-family: "MyFont"; format: 'url (' / fonts / font.ttf ') format (' truetype '), url (' / fonts / font.otf ') ("woff"), url ('/ fonts / font.eot') formatet ('embedded-opentype');  

Med kompass vi kan göra detsamma lättare med font-filer () hjälpare;

 @include font-face ("MyFont", fontfiler ("font.ttf", "font.otf", "font.woff", "font.eot")); 

Koden ovan kommer att generera ett resultat som är exakt detsamma som det första kodavsnittet, det kommer också automatiskt att upptäcka typsnittstypen och lägga till den i formatera() syntax.

Men om vi tittar på koden noggrant ser du att vi inte har lagt till typsnittsstigen (/ fonter /). Så, hur kände Compass var typsnittet finns? Tja, bli inte förvirrad, den här vägen är faktiskt härledd från config.rb med fonts_path fast egendom;

 fonts_dir = "fonts" 

Så, låt oss säga att vi ändrar det till fonts_dir = "myfonts", då kommer den genererade koden att vara url ( '/ myfonts / font.ttf'). Som standard, när vi inte specificerar sökvägen, kommer Compass att styra den till Mallar / fonter.

Lägga till bild

Låt oss skapa ett annat exempel, den här gången lägger vi till en bild. Att lägga till bilder via CSS är en vanlig sak. Vi gör det generellt genom att använda bakgrundsbild egendom, som så;

 div background-image: url ('/ img / the-image.png');  

I kompass, snarare än att använda url () funktion kan vi ersätta den med bild URL() Hjälpare och liknande att lägga till @ Font-face ovan kan vi helt ignorera banan och låta Compass hantera resten.

Denna kod kommer också att generera exakt samma CSS-deklaration som i första stycket.

 div background-image: image-url (the-image.png);  

Dessutom har Compass Image Dimension Helpers, det identifierar primärt bildbredden och höjden, så om vi behöver dem båda som anges i vår CSS kan vi lägga till ytterligare två rader, enligt följande;

 div background-image: image-url ("images.png"); bredd: bildbredd ("images.png"); höjd: bildhöjd ("images.png");  

Utgången blir så här;

 div background-image: url ('/ img / images.png? 1344774650'); bredd: 80px; höjd: 80px;  

Vidare läsning: Kompasshjälpsfunktioner

Slutlig tanke

Okej, vi har diskuterat ganska mycket om Compass idag och som du kan se är det verkligen ett kraftfullt verktyg och låt oss skriva CSS på ett mer elegant sätt.

Och som du redan visste är Sass inte den enda CSS Preprocessor; det finns också mindre som vi noggrant har diskuterat förut. I nästa inlägg kommer vi att försöka jämföra, head-to-head, vilken av dessa två gör jobbet bättre vid förbehandling av CSS.

• Hämta källa