Syntactically Awesome Stylesheets pomoću kompasa u Sass

U našem posljednjem postu, jednom smo spomenuli Compass. Prema službenim stranicama, to je opisano kao okvir za pisanje CSS-a otvorenog koda.

Ukratko, Compass je Sass ekstenzija i, poput LESS Element of LESS, ima gomilu spremnih za korištenje CSS3 Mixins, osim što je također dodao nekoliko drugih stvari koje ga čine snažnijim alatom za Sass. Provjerimo.

Instalacija kompasa

Kompas, poput Sassa, treba instalirati u naš sustav. No, ako koristite aplikaciju kao što je Scout App ili Compass.app, to neće biti potrebno.

Bez njih, morate to učiniti “ručno” kroz Terminal / Command Prompt. Da biste to učinili, upišite sljedeći red za naredbe;

Na Mac / Linux terminalu

 sudo gem instalirati kompas 

Na Windows Command Prompt

 gem install kompas 

Ako instalacija uspije, trebate dobiti obavijest kao što je prikazano u nastavku;

Zatim pokrenite sljedeći naredbeni redak u svom radnom direktoriju za dodavanje Kompas projektne datoteke.

 kompas init 

Daljnje čitanje: Dokumentacija komandne linije kompasa

Konfiguracija kompasa

Ako ste pokrenuli ovu naredbu kompas init, sada biste trebali imati datoteku pod nazivom config.rb u radnom imeniku. Ova se datoteka koristi za konfiguriranje izlaznih rezultata projekta. Na primjer, možemo promijeniti naše preferirane nazive direktorija.

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

Uklonite redak komentara koji generira kompas; postavljamo pravi ako su nam potrebni komentari za ispis ili lažan ako ne mora.

 line_comments = false 

Također možemo odlučiti o izlazu CSS-a. Postoje četiri mogućnosti koje možemo odabrati :proširen, :kompaktan, : komprimiranii : uklopljeni. Za sada nam je samo potrebno da se proširi dok smo još u fazi razvoja.

 output_style =: prošireno 

Mislim da će ove konfiguracije biti dovoljne za većinu projekata općenito, ali uvijek možete pogledati ovu dokumentaciju, Compass Configuration Reference ako trebate više postavki.

Na kraju, moramo Gledati svaka datoteka u direktoriju s ovom naredbenom retkom;

 sat kompasa 

Ova naredbena linija, kao u Sassu, gledat će svaku promjenu datoteke i stvoriti ili ažurirati odgovarajuće CSS datoteke. Ali zapamtite, pokrenite ovaj redak nakon što ste konfigurirali projekt config.rb, ili će ignorirati promjene u datoteci.

CSS3 Mixins

Prije hodanja kroz CSS3, u našem primarnom .scss datoteku, trebamo uvesti kompas sa sljedećim retkom @import "kompas";, ovo će uvesti sva proširenja u Kompasu. Ali, ako nam je potreban samo CSS3, možemo to i učiniti s tom linijom @import "kompas / css3".

Daljnje čitanje: Kompas CSS3.

Počnimo stvarati nešto sa Saasom i Compassom. U HTML dokumentu, uz pretpostavku da ste ga i stvorili, stavit ćemo sljedeću jednostavnu oznaku:

Ideja je također jednostavna; kreirat ćemo zakrenutu kutiju s zaobljenim kutovima, a ispod je naš Sass nested stilova za starter;

 tijelo pozadinska boja: # f3f3f3;  odjeljak širina: 500px; margina: 50px auto 0; div širina: 250px; visina: 250px; boja pozadine: #ccc; margin: 0 auto;  

I, da bi dobili naš pravokutnik zaobljenih kutova, možemo uključiti Compass CSS3 Mixins na sljedeći način;

 tijelo pozadinska boja: # f3f3f3;  odjeljak širina: 500px; margina: 50px auto 0; div širina: 250px; visina: 250px; boja pozadine: #ccc; margin: 0 auto; @ uključite radijus granice;  

Ovaj granica-radijus Mixins će generirati sve prefikse preglednika i, prema zadanim postavkama, radijus ugla će biti 5px. No, mi također možemo odrediti radijus našoj potrebi na ovaj način @ uključite granični radijus (10px); .

 odjeljak div širina: 250px; visina: 250px; boja pozadine: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-granica-radijus: 10px; granični polumjer: 10px;  

Dalje, kao plan ćemo također rotirati okvir. To je stvarno lako učiniti s kompasom, sve što trebamo učiniti je jednostavno nazvati metodu transformacije, kao što je to slučaj;

 tijelo pozadinska boja: # f3f3f3;  odjeljak širina: 500px; margina: 50px auto 0; div širina: 250px; visina: 250px; boja pozadine: #ccc; margin: 0 auto; @ uključite granični radijus (10px); @ uključi rotaciju;  

Ovaj Mixins će također generirati one dosadne prefiksa dobavljača, a rotacija će zadano biti 45 stupnjeva. Pogledajte generirani CSS ispod.

 odjeljak div širina: 250px; visina: 250px; boja pozadine: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-granica-radijus: 10px; granični polumjer: 10px; -webkit-transform: rotirati (45deg); -moz-transform: rotirati (45deg); -ms-transform: rotiranje (45deg); -o-transform: rotirati (45deg); transformacija: rotiranje (45deg);  

Pomagači kompasa

Jedna od najmoćnijih značajki u kompasu su pomagači. Prema službenim stranicama, Pomoćnici kompasa su funkcije koje povećavaju funkcije koje pruža Sass. U redu, pogledajmo sljedeće primjere kako bismo dobili jasnu sliku.

Dodavanje @ datoteka fontova

U ovom primjeru dodajemo prilagođenu obitelj s fontovima 'Font-lica Pravilo. U običnom CSS3-u, kôd može izgledati ovako ispod, a sastoji se od četiri različite vrste fontova i za neke je ljude teško zapamtiti.

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

S kompasom isto možemo učiniti lakše font-datoteke () pomagači;

 @ uključiti font-face ("MyFont", font-datoteke ("font.ttf", "font.otf", "font.woff", "font.eot")); 

Gornji kôd generirat će rezultat koji je potpuno isti kao i prvi isječak koda, a također će automatski otkriti vrstu fonta i dodati ga u format() sintaksa.

Međutim, ako pažljivo pogledamo kôd, vidjet ćete da nismo dodali putanju fonta (/ fonts /). Kako je Compass znao gdje se nalaze fontovi? Pa, nemojte se zbuniti, ovaj put je zapravo izveden iz config.rb s fonts_path imovine;

 fonts_dir = "fontovi" 

Recimo da ga promijenimo fonts_dir = "myfonts", tada će generirani kod biti url ( '/ myfonts / font.ttf'). Prema zadanim postavkama, kada ne specificiramo putanju, kompas će ga usmjeriti Stilska / fontovi.

Dodavanje slike

Napravimo još jedan primjer, ovaj put dodajemo sliku. Dodavanje slika putem CSS-a uobičajena je stvar. To obično činimo pomoću alata pozadinska slika vlasništvo, kao što je to slučaj;

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

U kompasu, a ne pomoću URL () funkcija, možemo je zamijeniti slika URL () Pomoćnici i slično dodavanju 'Font-lica gore, možemo potpuno zanemariti putanju i pustiti kompasu da upravlja ostatkom.

Taj će kod također generirati točno istu CSS izjavu kao u prvom isječku.

 div pozadina-slika: slika-url (-image.png);  

Osim toga, Compass također ima i pomagala za dimenzioniranje slike, prvenstveno detektira širinu i visinu slike, tako da u slučaju da ih trebamo navesti u našem CSS-u možemo dodati još dvije linije, kako slijedi;

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

Izlaz će postati nešto takvo;

 div background-image: url ('/ img / images.png? 1344774650'); širina: 80px; visina: 80px;  

Daljnje čitanje: Kompas Helper funkcije

Konačna misao

Dobro, danas smo dosta razgovarali o kompasu i kao što možete vidjeti, to je stvarno moćan alat i dopustite nam da napišemo CSS na elegantniji način.

I, kao što ste već znali, Sass nije jedini CSS pretprocesor; tu je i manje, o čemu smo prije razgovarali. U sljedećem postu, pokušat ćemo usporediti, head-to-head, koji jedan od ova dva čini posao bolje u predobradi CSS-a.

• Preuzimanje izvora