Syntactically Awesome Stylesheets Bruke kompass i Sass
I vårt siste innlegg har vi nevnt en gang om Compass. Ifølge det offisielle nettstedet er det beskrevet som en åpen kildekode CSS Authoring Framework.
Kort sagt, Compass er en Sass-utvidelse og, som MINDRE Element of LESS, har den en rekke ferdige CSS3 Mixins, bortsett fra at den også har lagt til flere andre ting som gjør det til et kraftigere kompanjonsverktøy til Sass. La oss sjekke det ut.
Installere kompass
Kompass, som Sass, må installeres i vårt system. Men hvis du bruker et program som Scout App eller Compass.app, vil dette ikke være nødvendig.
Uten dem må du gjøre det “manuelt” gjennom Terminal / Command Prompt. For å gjøre det, skriv inn følgende kommandolinje;
På Mac / Linux Terminal
sudo perle installasjon kompass
På Windows Command Prompt
perleinstallasjonskompass
Hvis installasjonen lykkes, bør du få et varsel som vist nedenfor;
Kjør deretter kommandolinjen i arbeidskatalogen din for å legge til Kompassprosjektfiler.
kompass init
Videre lesning: Kompasskommandolinjedokumentasjon
Kompasskonfigurasjon
Hvis du har kjørt denne kommandoen kompass init, Du bør nå ha en fil som heter config.rb i arbeidskatalogen din. Denne filen brukes til å konfigurere prosjektutgangen. For eksempel kan vi endre våre foretrukne katalognavn.
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"
Strip ut kommentarlinjen som genereres av Compass; vi setter ekte hvis vi trenger kommentarer som skal skrives ut eller falsk hvis det ikke trenger å.
line_comments = false
Vi kan også bestemme CSS-utgangen. Det er fire alternativer vi kan velge :utvidet, :kompakt, : komprimertog : nestet. For nå trenger vi bare det å bli utvidet som vi fortsatt er i utviklingsstadiet.
output_style =: utvidet
Jeg tror disse konfigurasjonene vil være tilstrekkelig for de fleste prosjekter generelt, men du kan alltid henvise til denne dokumentasjonen, Compass Configuration Reference hvis du trenger flere preferanser.
Til slutt må vi se hver fil i katalogen med denne kommandolinjen;
kompass ur
Denne kommandolinjen, som i Sass, vil se alle filendringer, og opprette eller oppdatere de tilsvarende CSS-filene. Men husk, kjør denne linjen etter at du har konfigurert prosjektet i config.rb, Ellers vil det bare ignorere endringene i filen.
CSS3 Mixins
Før du går gjennom CSS3, i vår primære .SCSS fil, må vi importere kompasset med den følgende linjen @import "kompass";, Dette vil importere alle utvidelsene i Kompass. Men hvis vi bare trenger CSS3, kan vi også gjøre det mer spesifikt med denne linjen @import "kompass / css3".
Videre lesning: Kompass CSS3.
Nå, la oss begynne å lage noe med Saas og Compass. I HTML-dokumentet, forutsatt at du også har opprettet en, legger vi følgende enkle oppslag:
Ideen er også enkel; Vi vil skape en rotert boks med avrundede hjørner, og nedenfor er våre Sass-nestede stiler for startpakken.
kropp bakgrunnsfarge: # f3f3f3; seksjon bredde: 500px; margin: 50px auto 0; div bredde: 250px; høyde: 250px; bakgrunnsfarge: #ccc; margin: 0 auto;
Og for å få vårt rektangel de avrundede hjørnene, kan vi inkludere Compass CSS3 Mixins som følger;
kropp bakgrunnsfarge: # f3f3f3; seksjon bredde: 500px; margin: 50px auto 0; div bredde: 250px; høyde: 250px; bakgrunnsfarge: #ccc; margin: 0 auto; @include border-radius;
Dette border-radius Mixins vil generere alle nettleserprefiksene, og som standard vil hjørneradiusen være 5px. Men vi kan også spesifisere radiusen til vårt behov på denne måten @include border-radius (10px); .
seksjon div bredde: 250px; høyde: 250px; bakgrunnsfarge: #ccc; margin: 0 auto; -webkit-grense-radius: 10px; -moz-grense-radius: 10px; -ms-grense-radius: 10px; -grense-radius: 10px; border-radius: 10px;
Neste, som planen, vil vi også rotere boksen. Det er veldig enkelt å gjøre det med Compass, alt vi trenger å gjøre er bare å ringe transformasjonsmetoden, slik som;
kropp bakgrunnsfarge: # f3f3f3; seksjon bredde: 500px; margin: 50px auto 0; div bredde: 250px; høyde: 250px; bakgrunnsfarge: #ccc; margin: 0 auto; @include border-radius (10px); @include rotere;
Denne Mixins vil også generere de kjedelige leverandør prefiksene og rotasjonen vil ta 45 grader som standard. Se den genererte CSS nedenfor.
seksjon div bredde: 250px; høyde: 250px; bakgrunnsfarge: #ccc; margin: 0 auto; -webkit-grense-radius: 10px; -moz-grense-radius: 10px; -ms-grense-radius: 10px; -grense-radius: 10px; border-radius: 10px; -webkit-transform: roter (45deg); -moz-transform: roter (45deg); -ms-transformer: roter (45deg); -o-transformer: roter (45deg); transformer: roter (45deg);
Kompasshjelpere
En av de mest kraftige funksjonene i Kompass er hjelperne. Ifølge det offisielle nettstedet, Kompasshjelpene er funksjoner som forsterker funksjonene som tilbys av Sass. OK, la oss ta en titt på følgende eksempler for å få et klart bilde.
Legge til @ Font-face-filer
I dette eksemplet skal vi legge til tilpasset skrifttype med @ Font-face regel. I vanlig CSS3 kan koden se noe ut som dette nedenfor, bestående av fire forskjellige skrifttyper, og det er også vanskelig å huske for noen mennesker.
@ font-face font-family: "MyFont"; format: '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 kompass vi kan gjøre det samme lettere med font-filer () Hjelpere;
@include font-face ("MyFont", skriftfiler ("font.ttf", "font.otf", "font.woff", "font.eot")); Koden ovenfor vil generere et resultat som er nøyaktig det samme som det første kodestykket, det vil også automatisk oppdage skrifttypen og legge den til format() syntaks.
Men hvis vi tar en titt på koden tett, ser du at vi ikke har lagt til skrifttypebanen (/ skrifter /). Så, hvordan kjente Compass hvor skrifterne ligger? Vel, ikke bli forvirret, denne banen er faktisk avledet fra config.rb med fonts_path eiendom;
fonts_dir = "fonter"
Så, la oss si at vi forandrer det til fonts_dir = "myfonts", da vil den genererte koden bli url ( '/ MyFonts / font.ttf'). Som standard, når vi ikke spesifiserer banen, vil Compass lede den til stilark / skrifter.
Legger til bilde
La oss lage et annet eksempel, denne gangen vil vi legge til et bilde. Legge til bilder gjennom CSS er en vanlig ting. Vi gjør det vanligvis ved å bruke bakgrunnsbilde eiendom, som det;
div bakgrunnsbilde: url ('/ img / the-image.png'); I kompass, i stedet for å bruke url () funksjon, kan vi erstatte den med image-url () Hjelpere og ligner på å legge til @ Font-face ovenfor, kan vi helt ignorere stien og la Compass håndtere resten.
Denne koden vil også generere nøyaktig samme CSS-deklarasjon som i den første koden.
div bakgrunnsbilde: image-url (the-image.png);
I tillegg har Compass Image Dimension Helpers, det oppdager primært bildebredden og høyden, så hvis vi trenger dem begge for å bli spesifisert i vårt CSS, kan vi legge til to flere linjer, som følger;
div bakgrunnsbilde: image-url ("images.png"); bredde: bildebredde ("images.png"); høyde: bildehøyde ("images.png"); Utgangen blir noe slikt;
div bakgrunnsbilde: url ('/ img / images.png? 1344774650'); bredde: 80px; høyde: 80px; Videre lesning: Kompasshjelperfunksjoner
Endelig tanke
OK, vi har diskutert ganske mye om Compass i dag, og som du ser, er det virkelig et kraftig verktøy og la oss skrive CSS på en mer elegant måte.
Og som du allerede visste, er Sass ikke den eneste CSS Preprocessor; det er også mindre som vi har grundig diskutert før. I neste innlegg vil vi forsøke å sammenligne, head-to-head, hvilken av disse to gjør jobben bedre i preprocessing CSS.
- Last ned kilde
