Sassaktiliselt Awesome Stylesheets kasutades Compass Sass

Meie viimases postituses oleme maininud kompassi kohta üks kord. Ametliku saidi kohaselt on seda kirjeldatud kui avatud lähtekoodiga CSS autoriseerimise raamistik.

Lühidalt öeldes on Compass Sass-laiendus ja nagu LESS Element of LESS, on sellel hulk valmis CSS3 Mixins'it, välja arvatud see on lisanud ka mitmeid muid asju, mis muudavad selle Sassile võimsamaks kaaslaseks. Vaatame seda läbi.

Kompassi installimine

Kompass, nagu Sass, tuleb paigaldada meie süsteemi. Aga kui kasutate sellist rakendust nagu Scout App või Compass.app, ei ole see vajalik.

Ilma nendeta peate seda tegema “käsitsi” läbi Terminal / käsuviip. Selleks sisestage järgmine käsurida;

Mac / Linuxi terminalis

 sudo gem install kompass 

Windowsi käsuviip

 gem install kompass 

Kui installimine õnnestub, peaksite saama teate, nagu allpool näidatud;

Seejärel käivitage lisamiseks oma käsiraamatus järgmine käsurida Kompassi projekti failid.

 kompassi init 

Lisalugemist: Kompassi käsurea dokumentatsioon

Kompassi seadistamine

Kui olete käsu käinud kompassi init, teil peaks nüüd olema nimi nimega config.rb oma töökausta. Seda faili kasutatakse projekti väljundi konfigureerimiseks. Näiteks saame muuta meie eelistatud kataloogide nimesid.

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

Kustutage kompassi koostatud kommentaaririda; me seadsime tõsi kui vajame trükitud kommentaare või vale kui see ei pea.

 line_comments = false 

Samuti võime otsustada CSS-väljundi üle. Me võime valida neli võimalust : laiendatud, : kompaktne, : kokkusurutudja : pesastatud. Praegu vajame seda lihtsalt laiendamiseks, sest me oleme ikka veel arenguetapis.

 output_style =: laiendatud 

Ma arvan, et need konfiguratsioonid on enamiku projektide jaoks piisavad, kuid alati võite viidata sellele dokumendile, kompassi konfigureerimise viitele, kui vajate rohkem eelistusi.

Lõpuks peame vaata iga käsureaga kataloogi fail;

 kompassikell 

See käsurida, nagu Sass, vaatab iga faili muutust ning loob või värskendab vastavaid CSS-faile. Kuid pidage meeles, et käivitage see rida pärast projekti konfigureerimist config.rb, või muidu ignoreerib muudatused failis.

CSS3 segud

Enne kõndimist läbi CSS3, meie esmases .scss peame importima Compassi järgmise reaga @import "kompass";, see impordib kõik kompassi laiendused. Aga kui me vajame ainult CSS3, saame seda ka selle reaga täpsemalt teha @import "kompass / css3".

Lisalugemist: Kompass CSS3.

Nüüd alustame midagi Saase ja Compassiga. HTML-dokumendis, eeldades, et olete ka selle loonud, paigutame järgmise lihtsa märgistuse:

Idee on samuti lihtne; me loome pööratud kasti ümarate nurkadega ja allpool on meie Sass'i sisestatud stiilid starterile;

 keha taustavärv: # f3f3f3;  sektsioon laius: 500 px; marginaal: 50px auto 0; div laius: 250 px; kõrgus: 250 px; taustavärv: #ccc; marginaal: 0 auto;  

Ja selleks, et saada meie ristkülik ümarate nurkadega, võime lisada kompassi CSS3 segud järgmiselt;

 keha taustavärv: # f3f3f3;  sektsioon laius: 500 px; marginaal: 50px auto 0; div laius: 250 px; kõrgus: 250 px; taustavärv: #ccc; marginaal: 0 auto; @keerige raadius;  

See raadius Mixins genereerib kõik brauseri prefiksid ja vaikimisi on nurkraadius 5tk. Kuid me saame sel viisil täpsustada ka meie vajaduste raadiuse @ sisaldab ka raadiust (10px); .

 lõik div laius: 250 px; kõrgus: 250 px; taustavärv: #ccc; marginaal: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10 px; -ms-piiri-raadius: 10px; -o-raadius: 10px; raadius: 10 px;  

Järgmisena pöörleme plaani me kasti. See on tõesti lihtne teha kompassiga, vaid me peame lihtsalt nimetama transformatsioonimeetodit;

 keha taustavärv: # f3f3f3;  sektsioon laius: 500 px; marginaal: 50px auto 0; div laius: 250 px; kõrgus: 250 px; taustavärv: #ccc; marginaal: 0 auto; @ sisaldab ka raadiust (10px); @include rotate;  

See Mixins loob ka need tüütu müüja eesliited ja pöörlemine võtab vaikimisi 45 kraadi. Vaadake allpool genereeritud CSS-i.

 lõik div laius: 250 px; kõrgus: 250 px; taustavärv: #ccc; marginaal: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10 px; -ms-piiri-raadius: 10px; -o-raadius: 10px; raadius: 10 px; -webkit-transform: pöörake (45deg); -moz-transform: pöörake (45deg); -ms-transform: pöörake (45deg); -o-transformatsioon: pöörata (45deg); transform: rotate (45deg);  

Kompassi abilised

Compassi üks võimsamaid omadusi on abilised. Ametliku saidi järgi, Kompassi abilised on funktsioonid, mis suurendavad Sass'i pakutavaid funktsioone. Selge pildi saamiseks vaadake alljärgnevaid näiteid.

@ Font-nägu failide lisamine

Selles näites lisame kohandatud fontide perekonna @ font-face reegel. Tavalises CSS3-s võib kood tunduda alljärgnevalt, mis koosneb neljast erinevast kirjatüübist ja mõnedele inimestele on samuti raske meeles pidada..

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

Kompassi abil saame sama lihtsamalt teha font-failid () Abilised;

 @ lisage font-nägu ("MyFont", fondifailid ("font.ttf", "font.otf", "font.woff", "font.eot")); 

Ülaltoodud kood genereerib tulemuse, mis on täpselt sama, mis esimene koodilõik, samuti tuvastab see automaatselt fonditüübi ja lisab selle formaat () süntaks.

Kui vaatame koodi hoolikalt, näete, et me ei lisanud fondi teed (/ fonte /). Niisiis, kuidas Compass teaks, kus fonte asuvad? Noh, ärge saage segadust, see tee on tegelikult tuletatud config.rb koos fonts_path vara;

 fonts_dir = "fonte" 

Oletame, et me muudame selle fonts_dir = "myfonts", siis genereeritakse kood URL ('/ myfonts / font.ttf'). Vaikimisi, kui me ei tee seda teed, juhib Compass seda stiililehed / fondid.

Pildi lisamine

Loome veel üks näide, seekord lisame pildi. Piltide lisamine CSS-i kaudu on tavaline asi. Me teeme seda tavaliselt taustapilt vara;

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

Kompassi asemel kasutatakse URL () funktsioon, saame selle asendada image-url () Abilised ja sarnased lisamisega @ font-face ülalpool, saame täielikult ignoreerida teed ja lasta kompassil ülejäänut käsitseda.

See kood genereerib ka täpselt sama CSS-deklaratsiooni nagu esimesel väljavõttel.

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

Lisaks on Compassil ka Image Dimension Helpers, mis tuvastab peamiselt pildi laiuse ja kõrguse, nii et kui me vajame neid mõlemaid CSS-is täpsustama, saame lisada veel kaks rida järgmiselt;

 div background-image: image-url ("images.png"); laius: kujutise laius ("images.png"); kõrgus: kujutise kõrgus ("images.png");  

Väljund muutub selliseks;

 div background-image: url ('/ img / images.png? 1344774650'); laius: 80 px; kõrgus: 80 px;  

Lisalugemist: Kompassi abistaja funktsioonid

Lõplik mõte

Alright, me oleme täna Compassist päris palju arutanud ja näete, et see on tõesti võimas tööriist ja kirjutage CSS elegantsemal viisil.

Ja nagu sa juba teadsid, ei ole Sass ainus CSS eelprotsessor; on olemas ka LESS, mida me oleme eelnevalt põhjalikult arutanud. Järgmises postituses püüame võrrelda, pea-head, milline neist kahest teeb tööd paremaks eeltöötluses CSS.

• Allalaadimise allikas