Chceš své webové projekty posunout na další úroveň? S Compass, mocným rámcem pro Sass, ti to půjde lehce. V tomto návodu se dozvíš, jak efektivně využít podporu CSS3 funkcí pomocí Compassu. Jak na to a jaké funkce máš k dispozici, ti ukážu v následujících krocích.
Nejdůležitější poznatky
Práce s Compass a CSS3 ti umožňuje generovat moderní a prohlížečům kompatibilní CSS. Hlavní zdroj informací je webová stránka Compass, kde najdeš dokumentaci a řadu příkladů. S Compass můžeš snadno začlenit CSS3 funkce jako border-radius nebo text-shadow a tím využít automatické prohlížečové prefixy.
Podrobný návod
Abych mohl začít s Compass, potřebuji na začátek tvůj CSS soubor a správný import. Přejdi do svého projektu a otevři CSS soubor. Teď musíš importovat Compass. K tomu napíš:
Toto ti dává základní strukturu pro práci s CSS3.
Teď ti chci ukázat, jak pracovat s border-radius, protože to je velmi praktický příklad. Můžeš si vybrat, zda zahrneš všechny CSS3 funkce nebo specifické jako border-radius. Doporučuji zahrnout všechny funkce, aby ti bylo k dispozici více možností.
Abychom využili border-radius, vytvoříš třídu nebo ID, například ji nazveš.content. Poté vlož do složených závorek svou definici border-radius. Syntax najdeš v dokumentaci: musíš uvést horizontální a vertikální poloměr.
Napiš:
Ulož a podívej se na svůj soubor v prohlížeči. Co se stane? CSS příkaz border-radius se doplní o příslušné prohlížečové prefixy. Tím získáš nejen jednoduchou definici, ale také podporu pro různé prohlížeče.
Takto můžeš využít všechny CSS3 varianty, které Compass nabízí. Hlavní zdroj informací pro CSS3 v Compass je odpovídající sekce v dokumentaci, kde jsou vypsané všechny funkce. Pokud něčemu nerozumíš nebo chceš použít něco nového, jen tam nahlédni.
Teď další příklad, kde voláš funkci. Opět přejdi ke svému CSS a napiš:
Tato syntaxe zajišťuje, že box-shadow je vypsán s odpovídajícími prohlížečovými prefixy pro podporované prohlížeče.
Kromě toho ti Compass dává možnost stanovit pro svou práci prohlížečovou kompatibilitu. Zde můžeš definovat, které prohlížeče mají být podporovány, což je obzvlášť důležité, pokud tvůj klient trvá na podpoře starších verzí prohlížečů.
Definuj minimální verzi prohlížečů, kterou chceš použít. Tím zajistíš, že Compass na tuto požadavek zareaguje.
To jsou základní kroky, jak pracovat s Compass a funkcemi CSS3. Oficiální web projektu a reference kódu ti nabízejí vše, co potřebuješ pro efektivní práci.
Shrnutí
Se Compass máš mocný nástroj, který ti nejen pomůže rychle implementovat CSS3 funkce, ale také usnadňuje prohlížečovou podporu. Měl bys mít vždy po ruce dokumentaci Compass, abys využil široké možnosti, které ti tento rámec nabízí.
Často kladené otázky
Co je Compass?Compass je CSS rámec pro Sass, který ti pomáhá při vytváření stylů.
Jak importuji Compass do svého CSS souboru?Musíš ve svém CSS souboru použít příkaz @import 'compass'; k zahrnutí Compassu.
Jak mohu využívat CSS3 funkce pomocí Compass?Můžeš zahrnout CSS3 funkce pomocí mixinů, jako @include border-radius(...), přímo do svého kódu.
Jaký je přínos prohlížečových prefixů?Prohlížečové prefixy zajišťují, že tvé CSS definice budou správně zobrazeny ve starších prohlížečích nebo v experimentálních verzích prohlížečů.
Jak definuji prohlížečovou podporu v Compass?Minimální verzi prohlížeče můžeš stanovit v konfiguraci Compass.
