9 knižníc Mixin pre dizajnérov Sass by sa mali dostať
Ak používate Sass vo vývojovom pracovnom procese, poznáte dôležitosť mixinov. Keď uvidíte niektoré veci, ktoré sú napísané opakovane a opatrne v CSS, to je miesto, kde vám pomôžu zabrániť opakovanej práci. Mixin obsahuje deklarácie CSS, ktoré môžete opätovne použiť na vašich stránkach.
Existuje veľa mixin, ktoré robia vývojári, aby vám pomohli pri práci so spoločnosťou Sass vo vašom vývoji. Väčšina pokrýva veci, ktoré sa často opakujú v CSS. z prispôsobovanie sa viacerým prehliadačom na vytváranie tlačidiel, animácií a prechodových efektov, nájdite to a viac v nasledujúcich 11 mixin knižniciach, ktoré by ste mali získať pre váš vývoj Sass.
1. Bourbon
Bourbon je knižnica Sass, ktorá obsahuje mixin, funkcie a doplnky, ktoré vám umožnia zjednodušiť vytváranie šablón štýlov pre cross-browser použitie. Pre mňa je to najkrajšie mixovanie Sass. Obsahuje takmer všetko, čo potrebujete na štýl vašej webovej stránky, zatiaľ čo vaše štýl s ľahkosťou.
Pozrite si kompletnú dokumentáciu, aby ste použili všetky dostupné kombinácie a funkcie.
2. Sass CSS3 Mixins
Sass CSS3 Mixins poskytuje mixiny, ktoré fungujú v rôznych prehliadačoch. Nájdete tu veľa zmesí s najlepšou praxou, ako sú pozadie, hranice, pole, stĺpce, font-face, transformácia, prechod a animácia. To stačí na vaše štýlové potreby. Ak chcete použiť, importujte CSS3-mixins.scss a zavolajte mixin vo svojej triede CSS.
Stiahnite si tento mixin tu.
3. CssOwl
CssOwl poskytuje užitočné mixiny na nastavenie polohy elementu (relatívne alebo absolútne) a pridáva obsah s pseudo-selektorom ( : po a : before). To tiež pomáha, keď chcete vytvoriť sprite prvky: mixin dáva flexibilitu nastaviť pozíciu obrazu vo vašom sprite. Okrem knižnice Sass je knižnica CssOwl mixin k dispozícii aj pre LESS a Stylus.
4. Breakpoint Sass
Prerušovací bod vám pomôže jednoducho spraviť mediálne otázky prostredníctvom Sass. Pomocou funkcie Breakpoint môžete vytvoriť premenné a dať im hodnotu, ktorá definuje min šírkou alebo max šírkou mediálnych dopytov. Vzhľadom k tomu, že premenná, ktorú ste vytvorili, má zmysluplné meno, môžete ju jednoducho nazvať Sass.
5. Scut
Scut obsahuje sadu opakovane použiteľných mixov Sass, zástupných prvkov, funkcií a premenných, ktoré vám pomôžu ľahko implementovať bežné vzory kódov štýlov. Poskytuje kódy osvedčených postupov na vytváranie webových vecí, ako sú rozloženia stránok a štýlová typografia. Môžete znížiť opakovanie pri písaní kódu opakovane používaním kódu. Pomáhate tým, aby ste sa v tomto procese lepšie usporiadali.
6. Šafrán
Pomocou programu Saffron môžete jednoducho pridávať animácie a prechody CSS3. Existuje tucet animácií a prechodov, ktoré sú k dispozícii, vrátane fade in / out, posúvanie / vystúpenie, vzostup / vystúpenie, rovnako ako rôzne efekty, ako je trepanie, teeter, odraz a ďalšie. Ak chcete používať šafrán, stačí zahrnúť mixin do deklarácie Sass a zavolať na názov efektu vo vašej triede CSS. Saffron môžete získať tak, že ho nainštalujete pomocou Bower alebo Gem, alebo ho jednoducho stiahnete ručne z Github.
7. Typové nastavenia
TypeSettings je typ nástroja pre Sass. Nastaví veľkosť písma v modulárnej mierke pomocou tlačidiel em (namiesto rems alebo pixelov), vertikálneho rytmu a titulkov na základe citlivého pomeru. Môžete si ho nainštalovať aj s aplikáciou Bower, prevziať vydanie alebo klonovať repo. Podrobnejšie informácie nájdete na stránke.
8. Sass Line
Sass Line je Sass mixin, ktorý vám pomôže vytvoriť lepšiu typografiu. Na fonte používa rems jednotku, takže môžete pracovať proporcionálne od základnej mriežky. Sass Line používa presný vertikálny rytmus založený na základnej mriežke a umožňuje nastaviť modulárnu stupnicu pre každú z vašich zlomových bodov, aby ste získali dobré rozmery vo všetkých aspektoch vašej webovej stránky.
Prejdite sem a získajte viac informácií o tom, ako ju používať.
9. Andy.scss
Andy.scss je zbierka užitočných mixerov Sass, vytvorených tak, aby vám pomohli rozvinúť vzhľad webových stránok s ľahkosťou a udržať si svetlo. Existuje niekoľko desiatok mixov Sass od pozadia po animácie. Takmer všetky bežne používané vlastnosti CSS sú tu zahrnuté. Získajte ho v spoločnosti Github.
Ďalšie príspevky na Sass:
- Začíname so Sass
- Kopanie do Sass
- Ako skompilovať Sass s Sublime Text
- Použitie Bootstrap 3 S Sass
- Ako vytvoriť online VCard S Sass & Compass
- Porovnanie predprocesorov CSS: Sass Vs. LESS
- Syntakticky úžasné štýly: pomocou kompasu v Sass
- Ako previesť CSS na Sass & SCSS
