Mnoho konstruktérů používá nějaký CSS předprocesor, ať už to je Sass , MÉNĚ nebo Stylus . Používáte-li některý z těchto způsobů, pravděpodobně si také uvědomujete, že Compass je rámcem postaveným na Sassu, a ačkoli jeho instalace může být off-putting, jakmile ji použijete, rychle zjistíte, že je to jedna z nejlepších dovedností jakékoliv web designer se může naučit.
Pokud jste nikdy Sass nikdy nepoužili, doporučil bych, abyste se podívali na WDD úvod do Sass.
Kompas funguje jako rámec pro váš CSS. Když pracujete na velkém projektu, je to snadné, aby se věci dostaly z ruky a často najdou věci ve vašem CSS je výzva. Compass se pokusí vyřešit tyto problémy s přídavným přínosem práce s prefixy dodavatelů.
Jak jsem již řekl, Compass je rámec pro vaše CSS, který řeší některé problémy s jazykem. Obsahuje také několik nástrojů pro urychlení a snadnější vývoj:
Stejně jako Sass a LESS, Compass je jen nástroj, který usnadňuje tvorbu webových stránek.
Compass je Ruby klenot, takže pro jeho instalaci musíte nejdříve nainstalovat Ruby na váš počítač. Naštěstí instalace Ruby je jednoduchá, ve Windows stačí stahovat Ruby Installer pro Windows , na Mac / Linux postupujte podle pokynů na Ruby místo.
Po instalaci Ruby je instalace kompasu stejně snadná:
gem install compassTím se nainstalují Compass i Sass.
Chcete-li vytvořit projekt Compass, měli byste zadat:
compass create /path/to/projectcd /path/to/projectcompass watchTyto tři řádky kódu znamenají, že kdykoli změníte soubor Sass, budou automaticky kompilovány do CSS.
Můžete také použít Codekit (Mac) nebo Prepros (Windows) pro kompilaci souboru Sass při jeho uložení.
Kompas je rozdělen na moduly a pro zahájení používání nástrojů musíme nejprve importovat modul, který chceme, do hlavního souboru .scss. Například pro import modulu CSS3 bychom použili:
@import "compass/css3";Nyní můžeme začít používat nástroje a mixiny, které Compass nabízí pro nové vlastnosti, které byly dodány s CSS3. Nejlepším příkladem je to, že předpony dodavatelů nemusíte opakovat znovu a znovu, což bylo vždy problém, když se jednalo o CSS3.
Zde je příklad, jestliže jsme chtěli vytvořit jednoduché uspořádání tří sloupců s 20px okrajem, v CSS bychom měli napsat:
div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}Můžete vidět, jak neudržitelné, které rychle dělají náš kód. S pomocí Compassu a Sassu potřebujeme jen toto:
div{@include column-count(3);@include column-gap(20px);}Jak můžete vidět, odstranili jsme předpony prodejců a to, co trvalo 6 řádků CSS, jsme dosáhli za pouhých 2.
Dalším příkladem CSS, který vyžaduje spoustu psaní, jsou přechody. Zde je návod, jak v CSS psát jednoduchý bílý až černý gradient:
.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}Vytvoření stejného efektu s kompasem je stejně jednoduché jako:
.gradient{@include background-image(linear-gradient(#fff, #000));}Nejenže to významně snižuje množství kódu, ale pokud chcete změnit barvy, ve verzi Compass je stačí pouze jednou změnit.
Je zde úplný seznam zkrácené vlastnosti CSS3 zde.
Kompas také obsahuje některé pomocníky pro odkazy, z nichž jeden je reálný spořič času. Nejprve musíme zahrnout typografický model jako začátek našeho hlavního souboru Sass:
@import "compass/typography"Typografický modul má velkou zkratku pro barvy stylingu, například:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}To je nejlepší kompas; je to kód, který používáme denně a dává nám zkrácené verze.
Tento článek byl jen rychlý úvod do kompasu, ale pokud jste objevili tento předmět tak vzrušující jako já, pak bych důrazně doporučil, abyste podívejte se na jejich webové stránky a prozkoumat více nástrojů, které jsou k dispozici.
Doufám, že nyní vezmete v úvahu používání produktů Compass a Sass ve vašich projektech, protože jsou skutečně neuvěřitelným přírůstkem nástrojové řady webových návrhářů.
Používáte Compass nebo Sass? Dáváte přednost jinému předprocesoru? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, kompasový obraz přes Shutterstock.