Syntactically Awesome Stylesheets Brug Kompas i Sass

I vores sidste indlæg har vi en gang nævnt Compass. Ifølge det officielle websted er det beskrevet som en open source CSS Authoring Framework.

Kort sagt, Compass er en Sass-udvidelse, og som et mindre element mindre, har den en flok brugsklare CSS3 Mixins, medmindre det også har tilføjet flere andre ting, der gør det til et mere kraftfuldt ledsagende værktøj til Sass. Lad os tjekke det ud.

Installation af kompas

Kompas, som Sass, skal installeres i vores system. Men hvis du bruger en applikation som Scout App eller Compass.app, er det ikke nødvendigt.

Uden dem skal du gøre det “manuelt” igennem Terminal / Command Prompt. For at gøre det skal du skrive følgende kommandolinje

På Mac / Linux Terminal

 sudo perle installation kompas 

På Windows Command Prompt

 perle installation kompas 

Hvis installationen lykkes, skal du få en meddelelse som vist nedenfor;

Kør derefter følgende kommandolinje i din arbejdskatalog for at tilføje Kompasprojektfiler.

 kompass init 

Yderligere læsning: Kompaskommandolinjedokumentation

Kompas konfiguration

Hvis du har kørt denne kommando kompass init, Du skal nu have en fil ved navn config.rb i din arbejdskatalog. Denne fil bruges til at konfigurere projektudgangen. For eksempel kan vi ændre vores foretrukne katalognavne.

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

Strip ud kommentaren linje, der er genereret af Compass; vi sætter rigtigt hvis vi har brug for kommentarer, der skal udskrives eller falsk hvis det ikke behøver at.

 line_comments = false 

Vi kan også bestemme CSS output. Der er fire muligheder, vi kan vælge : udvidet, :kompakt, : komprimeretog : indlejret. For nu har vi bare brug for at blive udvidet, da vi stadig er i udviklingsfasen.

 output_style =: udvidet 

Jeg tror, ​​at disse konfigurationer er nok til de fleste projekter generelt, men du kan altid henvise til denne dokumentation, Compass Configuration Reference, hvis du har brug for flere præferencer.

Endelig skal vi holde øje hver fil i mappen med denne kommandolinje;

 kompas ur 

Denne kommandolinje, som i Sass, vil se alle filændringer og oprette eller opdatere de tilsvarende CSS-filer. Men husk, kør denne linje, når du har konfigureret projektet i config.rb, Ellers vil det bare ignorere ændringerne i filen.

CSS3 Mixins

Før du går gennem CSS3, i vores primære .SCSS fil, skal vi importere kompassen med den følgende linje @import "kompas";, Dette vil importere alle udvidelser i Kompas. Men hvis vi kun har brug for CSS3, kan vi også gøre det mere specifikt med denne linje @import "kompas / css3".

Yderligere læsning: Kompas CSS3.

Lad os nu begynde at lave noget med Saas og Compass. I HTML-dokumentet, forudsat at du også har oprettet en, sætter vi følgende simple markup:

Ideen er også enkel; vi vil skabe en roteret kasse med afrundede hjørner, og nedenfor er vores Sass nestede stilarter til starteren;

 krop baggrundsfarve: # f3f3f3;  sektion bredde: 500px; margin: 50px auto 0; div bredde: 250px; højde: 250px; baggrundsfarve: #ccc; margin: 0 auto;  

Og for at få vores rektangel de afrundede hjørner kan vi inkludere Compass CSS3 Mixins som følger:

 krop baggrundsfarve: # f3f3f3;  sektion bredde: 500px; margin: 50px auto 0; div bredde: 250px; højde: 250px; baggrundsfarve: #ccc; margin: 0 auto; @ omfatte grænseradius  

Dette border-radius Mixins vil generere alle browseren præfikser og som standard hjørne radius vil være 5px. Men vi kan også angive radiusen til vores behov på denne måde @include border-radius (10px); .

 sektion div bredde: 250px; højde: 250px; baggrundsfarve: #ccc; margin: 0 auto; -webkit-grænse-radius: 10px; -moz-grænse-radius: 10px; -ms-radius: 10px; -grense-radius: 10px; grænse-radius: 10px;  

Næste, som planen, vil vi også rotere boksen. Det er virkelig nemt at gøre det med Compass, alt hvad vi skal gøre er bare at kalde transformationsmetoden som sådan;

 krop baggrundsfarve: # f3f3f3;  sektion bredde: 500px; margin: 50px auto 0; div bredde: 250px; højde: 250px; baggrundsfarve: #ccc; margin: 0 auto; @include border-radius (10px); @include rotere;  

Denne Mixins vil også generere disse kedelige leverandør præfikser og rotationen vil tage 45 grader som standard. Se den genererede CSS nedenfor.

 sektion div bredde: 250px; højde: 250px; baggrundsfarve: #ccc; margin: 0 auto; -webkit-grænse-radius: 10px; -moz-grænse-radius: 10px; -ms-radius: 10px; -grense-radius: 10px; grænse-radius: 10px; -webkit-transform: roter (45deg); -moz-transform: roter (45deg); -ms-transformer: roter (45deg); -o-transformer: roter (45deg); transformer: roter (45deg);  

Kompasshjælpere

En af de mest kraftfulde funktioner i Compass er hjælperne. Ifølge det officielle websted, Kompasshjælperne er funktioner, der forstærker de funktioner, som Sass tilbyder. Okay, lad os tage et kig på følgende eksempler for at få et klart billede.

Tilføjelse af @ Font-face-filer

I dette eksempel skal vi tilføje brugerdefineret skrifttype med @ Font-face Herske. I almindelig CSS3 kan koden se sådan ud nedenfor som består af fire forskellige skrifttyper, og det er også svært at huske for nogle mennesker.

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

Med kompas vi kan gøre det samme lettere med font-filer () Hjælpere;

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

Koden ovenfor vil generere et resultat, der er nøjagtigt det samme som det første kodestykke, det vil også automatisk registrere skrifttypen og føje det til format() syntaks.

Men hvis vi kigger på koden nøje, vil du se, at vi ikke tilføjede skrifttypebanen (/ fonts /). Så hvordan kunne Compass vide, hvor skrifttyperne er placeret? Nå, ikke blive forvirret, denne vej er faktisk afledt af config.rb med fonts_path ejendom;

 fonts_dir = "skrifttyper" 

Så lad os sige, at vi ændrer det til fonts_dir = "myfonts", så vil den genererede kode være url ( '/ MyFonts / font.ttf'). Som standard, når vi ikke angiver stien, vil Compass rette det til Stylesheets / fonts.

Tilføjelse af billede

Lad os oprette et andet eksempel, denne gang vil vi tilføje et billede. Tilføjelse af billeder via CSS er en fælles ting. Vi gør det generelt ved at bruge baggrundsbillede ejendom som sådan;

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

I kompas, snarere end at bruge url () funktion, kan vi erstatte det med billede-url () Hjælpere og ligner at tilføje @ Font-face ovenfor kan vi fuldstændig ignorere stien og lade Compass klare resten.

Denne kode vil også generere den nøjagtige samme CSS-deklaration som i det første uddrag.

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

Derudover har Compass også Image Dimension Helpers, det registrerer primært billedbredden og højden, så hvis vi har brug for dem begge for at blive specificeret i vores CSS, kan vi tilføje to linjer som følger:

 div background-image: image-url ("images.png"); bredde: billedbredde ("images.png"); højde: billedhøjde ("images.png");  

Outputen bliver sådan noget;

 div baggrundsbillede: url ('/ img / images.png? 1344774650'); bredde: 80px; højde: 80px;  

Yderligere læsning: Kompashjælperfunktioner

Endelig tanke

Okay, vi har diskuteret ret meget om Compass i dag, og som du kan se det er virkelig et kraftfuldt værktøj og lad os skrive CSS på en mere elegant måde.

Og som du allerede vidste, er Sass ikke den eneste CSS Preprocessor; der er også mindre, som vi har drøftet grundigt før. I det næste indlæg vil vi forsøge at sammenligne, head-to-head, hvilken af ​​disse to gør jobbet bedre i forarbejdning af CSS.

• Download kilde