Syntactically Awesome Stylesheets z uporabo kompasa v Sass

V zadnjem delu smo že omenili kompas. Po uradni spletni strani je opisano kot Odprtokodni okvir za avtorizacijo CSS.

Skratka, Compass je Sassov podaljšek in, kot je LESS Element of LESS, ima kup gotovih CSS3 Mixinov, razen da je dodal še nekaj drugih stvari, zaradi katerih je Sass še bolj zmogljivo orodje za spremstvo. Poglejmo.

Namestitev kompasa

Kompas, kot Sass, namestiti v naš sistem. Toda, če uporabljate aplikacijo, kot je Scout App ali Compass.app, to ne bo potrebno.

Brez njih morate to storiti “ročno” skozi Terminal / ukazni poziv. V ta namen vnesite naslednjo ukazno vrstico;

Na terminalu Mac / Linux

 sudo gem namestite kompas 

V ukaznem pozivu Windows

 gem namestite kompas 

Če je namestitev uspešna, morate prejeti obvestilo, kot je prikazano spodaj;

Nato v delovni imenik zaženite naslednji ukazni vrstici Datoteke projekta Compass.

 kompas init 

Nadaljnje branje: Dokumentacija ukazne vrstice kompasa

Konfiguracija kompasa

Če ste zagnali ta ukaz kompas init, zdaj bi morali imeti datoteko z imenom config.rb v svojem delovnem imeniku. Ta datoteka se uporablja za konfiguriranje izhodnega projekta. Na primer, lahko spremenimo naša prednostna imeniška imena.

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

Odstranite vrstico komentarjev, ki jo generira Compass; nastavili smo prav če potrebujemo natisnjene pripombe ali. \ t false če ni treba.

 line_comments = false 

Lahko se odločimo tudi o izhodu CSS. Izbiramo lahko štiri možnosti : razširjeno, : kompaktna, : stisnjenoin : ugnezdeno. Za zdaj samo potrebujemo, da se razširi, saj smo še v fazi razvoja.

 output_style =: razširjeno 

Mislim, da bodo te konfiguracije zadostovale za večino projektov na splošno, vendar se lahko vedno obrnete na to dokumentacijo, Compass Configuration Reference, če potrebujete več nastavitev.

Nazadnje moramo gledam vsaka datoteka v imeniku s to ukazno vrstico;

 ura kompasa 

Ta ukazna vrstica, tako kot v Sass, bo gledala vsako spremembo datotek in ustvarila ali posodobila ustrezne datoteke CSS. Zapomnite si, da ta vrstica zaženete po tem, ko ste konfigurirali projekt config.rb, ali pa bo preprosto prezrl spremembe v datoteki.

CSS3 Mixins

Pred sprehodom skozi CSS3, v našem primarnem .scss datoteko, moramo uvoziti kompas z naslednjo vrstico @import "kompas";, to bo uvozilo vse razširitve v Kompas. Toda, če potrebujemo le CSS3, lahko to storimo tudi s to vrstico @import "kompas / css3".

Nadaljnje branje: Kompas CSS3.

Zdaj pa začnimo ustvarjati nekaj z Saasom in Compassom. V dokumentu HTML, ob predpostavki, da ste ga ustvarili, bomo postavili naslednjo preprosto oznako:

Ideja je tudi preprosta; Ustvarili bomo rotirano škatlo z zaobljenimi vogali in spodaj je naš Sass nested stilov za starter;

 telo ozadje-barva: # f3f3f3;  Razdelek širina: 500px; margin: 50px auto 0; div širina: 250px; višina: 250px; barva ozadja: #ccc; margin: 0 auto;  

In, da bi dobili naš pravokotnik zaokrožene vogale, lahko vključimo kompas CSS3 Mixins kot sledi;

 telo ozadje-barva: # f3f3f3;  Razdelek širina: 500px; margin: 50px auto 0; div širina: 250px; višina: 250px; barva ozadja: #ccc; margin: 0 auto; @ vključi obmejni polmer;  

To polmer meje Mixins bo ustvaril vse predpone brskalnika in privzeto bo polmer kota 5px. Vendar lahko na ta način določimo tudi radius @ vključi obmejni polmer (10px); .

 oddelek div širina: 250px; višina: 250px; barva ozadja: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-obodni polmer: 10px; obrobni polmer: 10px;  

Naprej, kot načrt bomo tudi obrnili polje. Z Compassom je zelo preprosto, vse kar moramo storiti je, da preprosto pokličemo metodo preoblikovanja;

 telo ozadje-barva: # f3f3f3;  Razdelek širina: 500px; margin: 50px auto 0; div širina: 250px; višina: 250px; barva ozadja: #ccc; margin: 0 auto; @ vključi obmejni polmer (10px); @include rotate;  

Ta mešanica bo prav tako ustvarila tiste dolgočasne predpone prodajalca in rotacija bo privzeta za 45 stopinj. Spodaj si oglejte ustvarjeni CSS.

 oddelek div širina: 250px; višina: 250px; barva ozadja: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-obodni polmer: 10px; obrobni polmer: 10px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: vrtenje (45deg); transform: rotate (45deg);  

Pomočniki za kompas

Ena od najmočnejših funkcij v kompasu so pomočniki. Glede na uradni strani, Pomočniki kompasa so funkcije, ki povečujejo funkcije, ki jih zagotavlja Sass. V redu, poglejmo naslednje primere, da dobimo jasno sliko.

Dodajanje @ Font-face datotek

V tem primeru bomo dodali družino pisav po meri z @ font-face pravilo. V navadnem CSS3 lahko koda izgleda nekaj takega spodaj, sestavljena iz štirih različnih vrst pisav, za nekatere pa je tudi težko zapomniti..

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

Z kompasom enako lahko naredimo enako lažje font-files () Pomočniki;

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

Zgornja koda bo ustvarila rezultat, ki je popolnoma enak kot prvi odrezek kode, prav tako pa bo samodejno zaznal vrsto pisave in jo dodal v format () skladnjo.

Če pa pogledamo kodo, boste videli, da poti pisave nismo dodali (/ pisave /). Torej, kako je Compass vedel, kje so pisave? No, ne bodite zmedeni, ta pot je dejansko izpeljana config.rb z fonts_path premoženje;

 fonts_dir = "pisave" 

Torej, recimo, da ga spremenimo v fonts_dir = "myfonts", potem bo generirana koda url ('/ myfonts / font.ttf'). Po privzetku, ko ne podajamo poti, jo bo Compass usmeril stylesheets / fonts.

Dodajanje slike

Ustvarimo še en primer, tokrat bomo dodali sliko. Dodajanje slik preko CSS je običajna stvar. To običajno počnemo z uporabo slika ozadja tako lastnino;

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

V kompasu namesto z uporabo URL () funkcijo, jo lahko nadomestimo s URL slike () Pomočniki in podobno dodajanje @ font-face zgoraj, lahko popolnoma ignoriramo pot in pustimo kompas, da upravlja z ostalimi.

Ta koda bo prav tako ustvarila popolnoma enako izjavo CSS kot v prvem odlomku.

 div ozadje-slika: slika-url (the-image.png);  

Poleg tega ima Compass tudi pomočnike za slikovno dimenzijo, predvsem zaznava širino in višino slike, zato lahko v primeru, da jih potrebujemo, določimo v našem CSS, lahko dodamo še dve vrstici, kot sledi;

 div background-image: slika-url ("images.png"); width: image-width ("images.png"); height: image-height ("images.png");  

Izhod bo postal nekaj takega;

 div ozadje-slika: url ('/ img / images.png? 1344774650'); širina: 80px; višina: 80px;  

Nadaljnje branje: Funkcije pomožnega kompasa

Končna misel

Danes smo o Compassu precej razpravljali, saj lahko vidite, da je resnično močno orodje in pustite CSS pisati na bolj eleganten način..

In kot ste že vedeli, Sass ni edini Preprocesor CSS; Obstaja tudi LESS, ki smo ga že prej podrobno razpravljali. V naslednjem prispevku bomo poskušali primerjati, od enega do drugega, kar eden od teh dveh dela bolje opravi predprocesiranje CSS-ja..

• Prenesi vir