Syntakticky úžasné styly používající kompas v Sassu

V našem posledním příspěvku jsme se jednou zmínili o Compassu. Podle oficiálních stránek je to popsáno jako Open-source CSS Authoring Framework.

Stručně řečeno, Compass je rozšíření Sass a, stejně jako LESS Element of LESS, má spoustu ready-to-use CSS3 Mixins, kromě toho, že také přidal několik dalších věcí, které z něj činí silnější doprovodný nástroj pro Sass. Pojďme to zkontrolovat.

Instalace kompasu

Kompas, jako Sass, musí být nainstalován v našem systému. Pokud však používáte aplikaci jako Scout App nebo Compass.app, nebude to nutné.

Bez nich to musíte udělat “ručně” přes Terminál / Příkazový řádek. Chcete-li to provést, zadejte následující příkazový řádek;

V terminálu Mac / Linux

 sudo gem install kompas 

Na příkazovém řádku systému Windows

 gem nainstalovat kompas 

Pokud instalace proběhne úspěšně, měli byste obdržet oznámení uvedené níže;

Potom spusťte následující příkazový řádek v pracovním adresáři přidat Soubory projektu Compass.

 kompas init 

Další čtení: Dokumentace příkazového řádku kompasu

Konfigurace kompasu

Pokud jste spustili tento příkaz kompas init, nyní byste měli mít pojmenovaný soubor config.rb v pracovním adresáři. Tento soubor slouží ke konfiguraci výstupu projektu. Můžeme například změnit naše preferované názvy adresářů.

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

Odstraňte řádek komentáře, který je generován kompasem; jsme si stanovili skutečný pokud budeme potřebovat komentáře k tisku nebo Nepravdivé pokud to nemusí.

 line_comments = false 

Můžeme také rozhodnout o výstupu CSS. Můžeme si vybrat ze čtyř možností :rozšířený, :kompaktní, :stlačenýa : vnořené. Prozatím potřebujeme, aby byla rozšířena, protože jsme stále ve fázi vývoje.

 output_style =: rozbaleno 

Myslím si, že tyto konfigurace budou stačit pro většinu projektů obecně, ale vždy můžete na tuto dokumentaci odkazovat, pokud potřebujete více preferencí..

Konečně, musíme hodinky každý soubor v adresáři s tímto příkazovým řádkem;

 hodinky kompasu 

Tento příkazový řádek, stejně jako v Sassu, bude sledovat každou změnu souboru a vytvářet nebo aktualizovat odpovídající soubory CSS. Ale nezapomeňte spustit tento řádek poté, co jste provedli konfiguraci projektu config.rb, nebo jinak bude ignorovat změny v souboru.

CSS3 Mixiny

Před chůzí přes CSS3, v naší primární .scss soubor, musíme importovat kompas s následujícím řádkem @import "kompas";, Tím se naimportují všechna rozšíření v aplikaci Compass. Pokud však potřebujeme pouze CSS3, můžeme to s touto linií udělat také konkrétněji @import "kompas / css3".

Další čtení: Kompas CSS3.

Začněme něco s Saasem a Compassem. V dokumentu HTML, za předpokladu, že jste jej také vytvořili, vložíme následující jednoduché značky:

Myšlenka je také jednoduchá; vytvoříme otočenou krabici se zaoblenými rohy a níže jsou naše vnořené styly Sass pro startér;

 tělo barva pozadí: # f3f3f3;  section width: 500px; okraj: 50px auto 0; div width: 250px; výška: 250x; barva pozadí: #ccc; okraj: 0 auto;  

Abychom mohli obdélník zaokrouhlit, můžeme zahrnout Compass CSS3 Mixins následujícím způsobem;

 tělo barva pozadí: # f3f3f3;  section width: 500px; okraj: 50px auto 0; div width: 250px; výška: 250x; barva pozadí: #ccc; okraj: 0 auto; @ zahrnout hraniční rádius;  

Tento poloměr ohraničení Mixiny budou generovat všechny předpony prohlížeče a ve výchozím nastavení bude poloměr rohu 5px. Tímto způsobem můžeme také určit poloměr podle naší potřeby @ zahrnout hraniční rádius (10px); .

 sekce div width: 250px; výška: 250x; barva pozadí: #ccc; okraj: 0 auto; -webk-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; hraniční rádius: 10px;  

Dále, jak plán budeme také otočit box. Je to opravdu snadné udělat to s Compass, vše, co potřebujeme udělat, je jen zavolat transformační metodu, takhle;

 tělo barva pozadí: # f3f3f3;  section width: 500px; okraj: 50px auto 0; div width: 250px; výška: 250x; barva pozadí: #ccc; okraj: 0 auto; @ zahrnout hraniční rádius (10px); @include rotovat;  

Tyto Mixiny budou také generovat tyto nudné předpony dodavatele a rotace bude ve výchozím nastavení trvat 45 stupňů. Viz vygenerovaný CSS níže.

 sekce div width: 250px; výška: 250x; barva pozadí: #ccc; okraj: 0 auto; -webk-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; hraniční rádius: 10px; -webit-transformace: rotace (45deg); -moz-transformace: rotace (45deg); -ms-transformace: rotace (45deg); -o-transformace: rotace (45deg); transformace: rotace (45deg);  

Compass Helpers

Jednou z nejvýkonnějších funkcí Compass je Helpers. Podle oficiálních stránek, Pomocníci kompasu jsou funkce, které rozšiřují funkce poskytované společností Sass. Dobře, podívejme se na následující příklady, abychom získali jasný obraz.

Přidání souborů @ tváře

V tomto příkladu přidáme vlastní rodinu fontů @ font-face pravidlo. V prostém CSS3 může kód vypadat podobně, jak je uvedeno níže, sestávající ze čtyř různých typů písma a pro některé lidi je také těžké zapamatovat si.

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

S kompasem Můžeme to udělat snadněji font-files () Pomocníci;

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

Výše uvedený kód vygeneruje výsledek, který je přesně stejný jako první úryvek kódu, automaticky také detekuje typ písma a přidá jej do formát() syntax.

Pokud se však kód podíváme pozorně, uvidíte, že jsme cestu s fontem nepřidali (/ fonty /). Jak tedy Compass věděl, kde se fonty nacházejí? No, nenechte se zmást, tato cesta je vlastně odvozena od config.rb s fonts_path vlastnictví;

 fonts_dir = "fonty" 

Řekněme, že to změníme fonts_dir = "myfonts", pak bude vygenerovaný kód url ('/ myfonts / font.ttf'). Ve výchozím nastavení, když neurčíme cestu, Compass ji nasměruje stylesheets / fonts.

Přidání obrázku

Vytvořme další příklad, tentokrát přidáme obrázek. Přidávání obrázků přes CSS je běžná věc. Obecně to děláme pomocí pozadí majetek, jako je;

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

V kompasu, spíše než pomocí url () funkci, můžeme ji nahradit image-url () Pomocníci a podobní přidávání @ font-face výše, můžeme zcela ignorovat cestu a nechat Compass zvládnout zbytek.

Tento kód také vygeneruje přesně stejnou deklaraci CSS jako v prvním fragmentu.

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

Navíc, Compass má také Image Dimension Helpers, primárně detekuje šířku a výšku obrazu, takže v případě, že je potřebujeme oba specifikovat v našem CSS, můžeme přidat další dva řádky takto;

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

Výstup se stane něčím takovým;

 div background-image: url ('/ img / images.png? 1344774650'); šířka: 80px; výška: 80px;  

Další čtení: Pomocné funkce kompasu

Závěrečná myšlenka

Dobře, o Compassu jsme dnes hodně diskutovali a jak vidíte, je to opravdu mocný nástroj a napište nám CSS elegantnějším způsobem.

A jak už jste věděli, Sass není jediný CSS Preprocessor; je zde také LESS, o které jsme dříve důkladně diskutovali. V příštím příspěvku se pokusíme srovnávat, head-to-head, který jeden z těchto dvou úkolů lépe pracuje v předzpracování CSS.

• Stáhněte si zdroj