9 biblioteci Mixin pentru designerii Sass ar trebui să ajungă

Dacă utilizați Sass în fluxul de lucru al dezvoltării, știți importanța amestecurilor. Când vedeți câteva lucruri scrise în mod repetat și tedious în CSS, acolo unde amestecurile vă pot ajuta să preveniți munca repetitivă. Un mixin conține declarații CSS pe care le puteți reutiliza pe întregul site.

Există multe amestecuri făcute de dezvoltatori, care vă ajută să colaborați cu Sass în dezvoltarea dvs. Cele mai multe lucruri de acoperire care de multe ori repetitive în CSS. Din adaptarea în mai multe browsere la crearea de butoane, animații și efecte de tranziție, găsiți acest lucru și multe altele în următoarele 11 biblioteci mixin pe care trebuie să le obțineți pentru dezvoltarea Sass.

1. Bourbon

Bourbon este o bibliotecă Sass care conține mixin, funcții și add-uri care vă permit să simplificați crearea de foi de stil pentru utilizarea în browser încrucișat. Pentru mine, acesta este cel mai minunat mixer Sass. Conține aproape tot ceea ce aveți nevoie pentru a personaliza site-ul web, păstrând în același timp foaia dvs. de stil ușor.

Consultați documentația completă pentru a utiliza fiecare mixin și funcție disponibilă.

2. Sass CSS3 Mixins

Sass CSS3 Mixins oferă mixuri care funcționează în diferite browsere. Veți găsi aici o grămadă de mixuri de bune practici, cum ar fi fundal, frontieră, cutie, coloană, font-chip, transformare, tranziție și animație. Este suficient pentru nevoile dvs. de styling. Pentru a utiliza, importați CSS3-mixins.scss și apelați mixinul în clasa CSS.

Descărcați acest mixin aici.

3. CssOwl

CssOwl oferă mixuri utile pentru a seta poziția unui element (relativă sau absolută) și a adăuga conținut cu pseudo selectorul ( :după și :inainte de). De asemenea, vă ajută când doriți să creați elemente sprite: mixinul oferă flexibilitate pentru a seta poziția imaginii în sprite. În plus față de Sass, biblioteca CssOwl mixin este de asemenea disponibilă pentru LESS și Stylus.

4. Breakpoint Sass

Punctul de întrerupere vă ajută să efectuați interogări media prin Sass într-un mod simplu. Cu Breakpoint, puteți crea variabile și le puteți da o valoare care să definească min lățime sau lățimea maximă de interogări media. Întrucât variabila pe care ați creat-o are un nume semnificativ, îl puteți numi cu ușurință în Sass.

5. Scut

Scut conține un set de mixe reutilizabile Sass, substituenți, funcții și variabile care vă ajută să implementați cu ușurință modele comune de coduri de stil. Acesta oferă codul celor mai bune practici pentru a crea chestii web, cum ar fi layout-urile de pagină și tipografia de stil. Puteți reduce repetarea atunci când scrieți cod prin reutilizarea codului mai des. Astfel, vă ajută să vă mai organizați în acest proces.

6. Șofranul

Cu Saffron, puteți adăuga cu ușurință animații și tranziții CSS3. Există o duzină de animații și tranziții disponibile, inclusiv decolorare / ieșire, alunecare / ieșire, creștere / ieșire, precum și diverse efecte cum ar fi shake, teeter, bounce și altele. Pentru a utiliza Saffron, trebuie doar să includeți mixinul în declarația Sass și să apelați numele efectului în clasa CSS. Puteți obține Saffron instalându-l utilizând Bower sau Gem, sau doar descărcați-l manual de la Github.

7. Setări de tip

TypeSettings este un tip de set de instrumente pentru Sass. Acesta va seta mărimea fontului în scară modulară folosind em (în loc de rems sau pixeli), ritmul vertical și titlurile bazate pe rata de reacție. Puteți instala aceasta și cu Bower, descărcați versiunea sau clonați repo. Pentru mai multe detalii, consultați pagina.

8. Sass Line

Sass Line este un mixer Sass care vă ajută să faceți o mai bună tipografie. Utilizează o unitate rems pe fontul dvs., astfel încât să puteți lucra proporțional din grila de bază. Sass Line utilizează un ritm vertical precis, bazat pe grila de bază, și vă permite să setați o scară modulară pentru fiecare punct de întrerupere pentru a obține proporții bune în toate aspectele site-ului dvs..

Du-te aici pentru a obține mai multe detalii despre cum să-l utilizați.

9. Andy.scss

Andy.scss este o colecție de mixere utile Sass, construite pentru a vă ajuta să dezvoltați aspectul site-ului cu ușurință, păstrându-l ușor. Există zeci de amestecuri Sass, de la fundal la animație. Aproape toate proprietățile CSS utilizate în mod obișnuit sunt acoperite aici. Ia-o la Github.

Mai multe mesaje pe Sass:

Noțiuni de bază cu Sass
Săpat în Sass
Cum de a compila Sass cu text sublim
Folosind Bootstrap 3 cu Sass
Cum de a construi o VCard online cu Sass & Compass
Preprocesoare CSS comparativ: Sass Vs. MAI PUȚIN
Fise de stil sintactic minunate: Folosind busola în Sass
Cum Pentru a converti CSS la Sass & SCSS