Chceš svoje webové projekty posunúť na ďalšiu úroveň? S Compass, mocným rámcom pre Sass, sa ti to ľahko podarí. V tomto návode sa dozvieš, ako efektívne využiť podporu funkcií CSS3 prostredníctvom programu Compass. Ako na to a aké funkcie sú ti k dispozícii, ti ukážem v nasledujúcich krokoch.
Najdôležitejšie poznatky
Práca s Compassom a CSS3 ti umožňuje generovať moderné a prehliadačom kompatibilné CSS. Centrálne miesto je webová stránka Compass, na ktorej nájdeš dokumentáciu a množstvo príkladov. Pomocou Compassu môžeš ľahko zakomponovať funkcie CSS3 ako border-radius alebo text-shadow a ťažiť pritom z automatických prefixov pre prehliadače.
Krok za krokom návod
Aby si mohol začať s Compassom, najskôr potrebujem tvoju CSS-šírku a správny import. Choď do svojho projektu a otvorme CSS súbor. Teraz musíš importovať Compass. Na to napíš:
Toto ti poskytne základný rámec na prácu s CSS3.
Teraz ti chcem ukázať, ako pracovať s border-radius, pretože je to veľmi praktický príklad. Máš na výber, či si vyberieš všetky funkcie CSS3 alebo špecifické ako border-radius. Odporúčam zahrnúť všetky funkcie, aby si mal k dispozícii viac možností.
Aby si mohol využiť border-radius, vytvoríš triedu alebo ID, napríklad ju nazveš.content. Potom do zložených zátvoriek vložíš svoju definíciu border-radius. Syntax nájdeš v dokumentácii: Musíš uviesť horizontálny a vertikálny polomer.
Napíš k tomu:
To uložíš a pozri svoj súbor v prehliadači. Čo sa stane? CSS príkaz border-radius sa doplní o príslušné prefixy pre prehliadače. Tak dostaneš nielen jednoduchú definíciu, ale aj podporu pre rôzne prehliadače.
Týmto spôsobom môžeš využiť všetky varianty CSS3, ktoré Compass ponúka. Centrálne miesto pre CSS3 v Compasse je príslušná sekcia v dokumentácii, kde sú uvedené všetky funkcie. Ak niečo nechápeš alebo chceš použiť novú funkciu, jednoducho sa tam pozri.
Teraz ďalší príklad, kde zavoláš funkciu. Choď opäť do svojho CSS a napíš:
Táto syntax zabezpečuje, že box-shadow bude s príslušnými prefixmi pre každý podporovaný prehliadač.
Okrem toho ti Compass ponúka možnosť nastaviť kompatibilitu prehliadača pre tvoj projekt. Tu môžeš definovať, ktoré prehliadače by mali byť podporované, čo je obzvlášť dôležité, ak tvoj klient trvá na podpore starších verzií prehliadačov.
Definuj minimálnu verziu prehliadačov, ktoré sa majú používať. Tým zabezpečíš, že Compass zohľadní túto požiadavku.
To sú základné kroky na prácu s Compassom a funkciami CSS3. Oficiálna webová stránka projektu a referenčné kódy ti poskytnú všetko, čo potrebuješ na efektívnu prácu.
Zhrnutie
S Compassom máš po ruke výkoný nástroj, ktorý ti nielenže pomáha rýchlo implementovať funkcie CSS3, ale aj uľahčuje podporu prehliadačov. Vždy by si mal mať pri ruke dokumentáciu pre Compass, aby si mohol využiť rozsiahle možnosti, ktoré ti tento rámec ponúka.
Často kladené otázky
Čo je Compass?Compass je CSS rámec pre Sass, ktorý ti pomáha pri vytváraní štýlov.
Jak importovať Compass do svojho CSS súboru?Musíš vo svojom CSS súbore použiť príkaz @import 'compass'; na import Compassu.
Kako môžem využiť funkcie CSS3 s Compassom?Môžeš priamo zakomponovať funkcie CSS3 pomocou mixinov, ako je @include border-radius(...).
Aká je výhoda prefixov pre prehliadače?Prefixy pre prehliadače zabezpečujú, že tvoje CSS definície sa správne zobrazujú v starších prehliadačoch alebo v experimentálnych verziách prehliadačov.
Jak definovať podporu prehliadača v Compasse?Môžeš definovať minimálnu podporovanú verziu prehliadača v konfigurácii Compassu.
