9 Mixin Knihovny Pro Sass Designéři Dostanou
Pokud používáte Sass ve vašem vývojovém pracovním postupu, znáte důležitost mixinů. Když vidíte některé věci, které jsou napsány opakovaně a zdlouhavě v CSS, to je místo, kde vám mixiny mohou pomoci zabránit opakované práci. Mixin obsahuje deklarace CSS, které můžete opakovaně používat na všech stránkách.
Existuje mnoho mixinů vytvořených vývojáři, kteří vám pomohou při práci se Sassem ve vašem vývoji. Většina pokrývá věci, které se v CSS často opakují. Z přizpůsobení ve více prohlížečích na vytváření tlačítek, animací a přechodových efektů, Toto a další informace naleznete v následujících 11 knihovnách mixin, které byste měli získat pro svůj vývoj Sass.
1. Bourbon
Bourbon je knihovna Sass, která obsahuje mixin, funkce a addony, které vám umožní zjednodušit vytváření stylů pro použití v různých prohlížečích. Pro mě je to nejúžasnější Sassův mixin. Obsahuje téměř vše, co potřebujete, aby vaše webové stránky ve stylu a zároveň zachovat váš styl lehký.
Prohlédněte si kompletní dokumentaci a použijte každý dostupný mixin a funkci.
2. Sass CSS3 Mixins
Sass CSS3 Mixins poskytují mixiny, které fungují v různých prohlížečích. Najdete zde spoustu nejlepších postupů, jako je pozadí, hranice, pole, sloupec, font-face, transformace, přechod a animace. Je to dost pro vaše stylingové potřeby. Chcete-li použít, importujte css3-mixins.scss a zavolejte mixin ve vaší CSS třídě.
Stáhněte si tento mixin zde.
3. CssOwl
CssOwl poskytuje užitečné mixy pro nastavení pozice prvku (relativní nebo absolutní) a přidávání obsahu pomocí pseudo voliče ( :po a :před). Pomáhá také, když chcete vytvářet elementy sprite: mixin poskytuje flexibilitu pro nastavení pozice obrazu ve vašem sprite. Kromě Sassu je také k dispozici knihovna CssOwl mixin pro LESS a Stylus.
4. Breakpoint Sass
Bod přerušení vám pomůže učinit mediální dotazy prostřednictvím Sassu jednoduchým způsobem. S Breakpoint můžete vytvořit proměnné a dát jí hodnotu, která definuje min-width nebo max-width mediálních dotazů. Protože proměnná, kterou jste vytvořili, má smysluplný název, můžete ji snadno použít pro použití v aplikaci Sass.
5. Výřez
Scut obsahuje sadu opakovaně použitelných mixů Sass, zástupných symbolů, funkcí a proměnných, které vám pomohou snadno implementovat běžné vzory vzorů stylů. Poskytuje kód osvědčených postupů pro vytváření webových věcí, jako jsou rozložení stránek a stylingová typografie. Opakování kódu můžete omezit opakovaným použitím kódu častěji. Pomáhá vám tak lépe se organizovat v procesu.
6. Šafrán
Se Saffronem můžete snadno přidat animace a přechody CSS3. Tam je tucet animací a přechodů k dispozici, včetně fade in / out, slide in / out, vzestup / out, stejně jako různé efekty, jako je třes, teeter, odrazit, a další. Chcete-li použít Saffron, stačí zahrnout mixin do deklarace Sass a zavolat název efektu do vaší třídy CSS. Můžete získat Saffron instalací pomocí Bower nebo Gem, nebo jen stáhnout ručně z Github.
7. Zadejte Nastavení
TypeSettings je typ sady nástrojů pro Sass. Nastaví velikost písma v modulovém měřítku pomocí em (namísto rems nebo pixelů), vertikálního rytmu a titulků založených na citlivosti. Můžete nainstalovat tento s Bower stejně, stáhnout verzi, nebo klonovat repo. Další podrobnosti naleznete na jeho stránce.
8. Sass Line
Sass Line je Sass mixin, který vám pomůže lépe typografii. Používá jednotku rems na vašem písmu, takže můžete pracovat proporcionálně od základní mřížky. Sass Line využívá přesný vertikální rytmus založený na základní mřížce a umožňuje nastavit modulární měřítko pro každý z vašich bodů přerušení, abyste dosáhli dobrých proporcí napříč všemi aspekty vašich webových stránek..
Chcete-li získat podrobnější informace o způsobu použití, přejděte sem.
9. Andy.scss
Andy.scss je kolekce užitečných Sass mixinů, které vám pomohou s jednoduchým vývojem webových stránek a zároveň udržují světlo. K dispozici jsou desítky Sass mixinů, od pozadí až po animace. Téměř všechny běžně používané vlastnosti CSS jsou zde zahrnuty. Dej to v Githubu.
Další příspěvky na serveru Sass:
- Začínáme s Sass
- Kopání do Sass
- Jak kompilovat Sass S Sublime Text
- Použití Bootstrap 3 Sass
- Jak vytvořit Online VCard S Sass & Compass
- CSS Preprocessors Porovnáno: Sass Vs. MÉNĚ
- Synthesically Awesome Stylesheets: Použití kompasu v Sassu
- Jak převést CSS na Sass & SCSS
