Syntakticky úžasné šablóny s použitím kompasu v Sass

V našom poslednom príspevku sme sa raz spomenuli na Compass. Podľa oficiálnych stránok je to opísané ako open-source CSS Authoring Framework.

Stručne povedané, Compass je rozšírenie Sass a podobne ako LESS Element of LESS obsahuje veľa CSS3 Mixins pripravených na použitie, okrem toho, že pridalo niekoľko ďalších materiálov, ktoré robia to silnejší spoločný nástroj pre Sass. Pozrime sa na to.

Inštalácia kompasu

Kompas, podobne ako Sass, musí byť nainštalovaný v našom systéme. Ak však používate aplikáciu ako Scout App alebo Compass.app, nebude to potrebné.

Bez nich je potrebné to urobiť “ručné” skrz Terminál / Príkazový riadok. Za týmto účelom zadajte nasledujúci príkazový riadok;

Na termináli Mac / Linux

 sudo gem inštalovať kompas 

Na príkazovom riadku systému Windows

 gem inštalovať kompas 

Ak je inštalácia úspešná, mali by ste dostať upozornenie, ako je uvedené nižšie.

Potom spustite nasledujúci príkazový riadok v pracovnom adresári, ktorý chcete pridať Súbory projektu Compass.

 kompas init 

Ďalšie čítanie: Dokumentácia príkazového riadka kompasu

Konfigurácia kompasu

Ak ste spustili tento príkaz kompas init, teraz by ste mali mať názov súboru config.rb vo vašom pracovnom adresári. Tento súbor sa používa na konfiguráciu výstupu projektu. Môžeme napríklad zmeniť naše preferované názvy priečinkov.

 http_path = "/" css_dir = "css" sass_dir = "scss" obrázky_dir = "img" javascripts_dir = "js" 

Odstráňte riadok komentárov generovaný spoločnosťou Compass; sme nastavili pravdivý ak potrebujeme komentáre, ktoré sa majú vytlačiť alebo nepravdivý ak to nemusí.

 line_comments = false 

Môžeme tiež rozhodnúť o výstupe CSS. Existujú štyri možnosti, ktoré môžeme vybrať : rozšírená, : kompaktný, : stlačenýa : vnorené. Pre túto chvíľu potrebujeme, aby sa rozšírila, pretože sme ešte vo vývojovej fáze.

 output_style =: expanded 

Myslím, že tieto konfigurácie stačia na väčšinu projektov vo všeobecnosti, ale vždy sa môžete obrátiť na túto dokumentáciu, Compass Configuration Reference, ak potrebujete viac preferencií.

Nakoniec musíme hodinky každý súbor v adresári s týmto príkazovým riadkom;

 hodinky kompasu 

Tento príkazový riadok, rovnako ako v programe Sass, bude sledovať každú zmenu súboru a vytvorí alebo aktualizuje príslušné súbory CSS. Ale nezabudnite, spustite tento riadok po tom, čo ste vykonali konfiguráciu projektu config.rb, alebo inak to bude len ignorovať zmeny v súbore.

CSS3 Mixins

Pred prechodom cez CSS3, v našom primárnom .SCSS súbor, musíme kompas importovať nasledujúcim riadkom @import "kompas";, toto importuje všetky rozšírenia v kompasu. Ale ak potrebujeme len CSS3, môžeme to urobiť aj konkrétnejšie s touto líniou @import "kompas / css3".

Ďalšie čítanie: Compass CSS3.

Teraz začneme s Saasom a Compassom niečo vytvoriť. V dokumente HTML, za predpokladu, že ste tiež vytvorili jeden, uvedieme nasledovné jednoduché označenie:

Myšlienka je tiež jednoduchá; vytvoríme rotovanú škatuľu so zaoblenými rohmi a nižšie sú naše štýly vložené do Sass pre štartéra;

 telo farba pozadia: # f3f3f3;  sekcia width: 500px; okraj: 50 pixelov auto 0; div šírka: 250px; výška: 250px; farba pozadia: #ccc; marža: 0 auto;  

A aby sme získali obdĺžnik za zaoblené rohy, môžeme zahrnúť Compass CSS3 Mixins nasledovne;

 telo farba pozadia: # f3f3f3;  sekcia width: 500px; okraj: 50 pixelov auto 0; div šírka: 250px; výška: 250px; farba pozadia: #ccc; marža: 0 auto; @ zahŕňa okraj polomeru;  

toto border-radius Mixiny vygenerujú všetky predpony prehliadača a v predvolenom nastavení bude rohový polomer 5px. Ale môžeme takisto špecifikovať polomer podľa našej potreby @ zahŕňa okraj (10px); .

 sekcia div šírka: 250px; výška: 250px; farba pozadia: #ccc; marža: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-okraj-polomer: 10px; -o-border-radius: 10px; polomer okrajov: 10 pixlov;  

Ďalej, ako plán budeme tiež otočiť box. Je to naozaj jednoduché to urobiť s Compassom, všetko, čo musíme urobiť, je jednoducho nazvať transformačnou metódou, podobne;

 telo farba pozadia: # f3f3f3;  sekcia width: 500px; okraj: 50 pixelov auto 0; div šírka: 250px; výška: 250px; farba pozadia: #ccc; marža: 0 auto; @ zahŕňa okraj (10px); @ include rotate;  

Táto Mixins bude tiež generovať tie nudné predpony dodávateľov a rotácia bude trvať 45 stupňov v predvolenom nastavení. Pozrite si generované CSS nižšie.

 sekcia div šírka: 250px; výška: 250px; farba pozadia: #ccc; marža: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-okraj-polomer: 10px; -o-border-radius: 10px; polomer okrajov: 10 pixlov; -webkit-transform: rotácia (45deg); -moz-transform: rotácia (45deg); -ms-transform: rotácia (45deg); -o-transformácia: otočenie (45deg); transformácia: rotácia (45deg);  

Compass Pomocníci

Jednou z najsilnejších funkcií Compassu je Helpers. Podľa oficiálnych stránok, Pomôcky kompasu sú funkcie, ktoré rozširujú funkcie poskytované spoločnosťou Sass. Dobre, pozrite sa na nasledujúce príklady, aby ste získali jasný obraz.

Pridávanie súborov @ Font-face

V tomto príklade pridáme vlastnú rodinu písiem @ Font-face vládnuť. V jednoduchom CSS3 môže kód vyzerať niečo takého, ktorý sa skladá zo štyroch rôznych typov písma a pre niektorých ľudí je tiež ťažké si ich zapamätať.

 @ font-face font-family: "MyFont"; formát formátu url ('/ fonts / font.otf') formátu ('opentype'), url ('/ fonts / font.woff') ('woff'), url ('/ fonts / font.eot') formát ('embedded-opentype');  

S kompasom môžeme s tým ľahšie urobiť font-súbory () pomocníci;

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

Vyššie uvedený kód vygeneruje výsledok, ktorý je úplne rovnaký ako prvý útržok kódu, automaticky tiež zistí typ písma a pridá ho do formát () syntax.

Ak sa však podrobne pozrieme na kód, uvidíte, že sme nepridali cestu písma (/ Fonts /). Takže, ako Compass vedel, kde sa nachádzajú fonty? No, nemusíte sa zamieňať, táto cesta je skutočne odvodená config.rb s fonts_path vlastníctva;

 fonts_dir = "fonty" 

Takže povedzme, že sme to zmenili fonts_dir = "myfonts", potom vygenerovaný kód bude url ( '/ MyFonts / font.ttf'). V predvolenom nastavení, keď neurčíme cestu, bude Compass smerovať stylesheets / fonts.

Pridávanie obrázkov

Vytvorme si ďalší príklad, tentokrát pridáme obrázok. Pridávanie obrázkov prostredníctvom CSS je bežná vec. Vo všeobecnosti to robíme pomocou background-image majetok, ako je tomu tak;

 div pozadie-obrázok: url ('/ img / the-image.png');  

V systéme Compass namiesto použitia url () funkciu, môžeme ju nahradiť image-url () Pomocníci a podobné pridávanie @ Font-face vyššie, môžeme úplne ignorovať cestu a nechať Compass spracovať zvyšok.

Tento kód bude tiež generovať presne rovnaké vyhlásenie CSS ako v prvom úryvku.

 div pozadie-obrázok: image-url (the-image.png);  

Okrem toho má Compass tiež pomôcky Image Dimension Dimensions, v prvom rade zisťuje šírku a výšku obrázkov, takže v prípade, že ich potrebujeme špecifikovať v našom CSS, môžeme pridať ďalšie dva riadky takto:

 div pozadie-obrázok: image-url ("images.png"); šírka: šírka obrazu ("images.png"); výška: výška obrazu ("images.png");  

Výstup sa stane niečím takým;

 div pozadie-obrázok: url ('/ img / images.png? 1344774650'); šírka: 80px; výška: 80px;  

Ďalšie čítanie: Pomocné funkcie kompasu

Konečná myšlienka

Dobre, dnes sme o Compase diskutovali a ako môžete vidieť, že je to naozaj výkonný nástroj a napíšeme CSS elegantnejšie.

A ako ste už vedeli, Sass nie je jediný CSS Preprocessor; je tu tiež menej, o čom sme už predtým dôkladne diskutovali. V ďalšom príspevku sa budeme snažiť porovnávať, od hlavy k hlave, ktorá z týchto dvoch robí lepšiu prácu pri prepracovaní CSS.

• Stiahnuť zdroj