9 Mixin knjižnice za oblikovalce Sass bi morale priti
Če uporabljate Sass v svojem razvojnem delovnem toku, veste, kako pomembni so mixins. Ko vidiš nekaj stvari, ki so napisane v CSS, tam vam lahko mešanice pomagajo preprečiti ponavljajoče se delo. Mixin vsebuje deklaracije CSS, ki jih lahko ponovno uporabite na vašem spletnem mestu.
Obstaja veliko mixins, ki jih razvijalci, ki vam pomaga pri delu s Sass v vašem razvoju. Večina zajema stvari, ki se pogosto ponavljajo v CSS. Od prilagoditev v več brskalnikih do ustvarjanje gumbov, animacij in učinkov prehoda, poiščite to in še več v naslednjih 11 knjižnicah mixin, ki jih morate dobiti za razvoj Sassa.
1. Bourbon
Bourbon je knjižnica Sass, ki vsebuje mixin, funkcije in dodatke, s katerimi lahko poenostavite izdelavo slogov za uporabo med brskalniki. Zame je to najlepši Sass mixin. Vsebuje skoraj vse, kar potrebujete za slog vaše spletne strani, hkrati pa ohranjate svojo slogovno obliko lahke.
Oglejte si celotno dokumentacijo za uporabo vsakega razpoložljivega mixina in funkcije.
2. Sass CSS3 Mixins
Sass CSS3 Mixins zagotavlja mešanice, ki delujejo v različnih brskalnikih. Tu boste našli veliko mešanic najboljših praks, kot so ozadje, meja, škatla, stolpec, pisava, preoblikovanje, prehod in animacija. Dovolj je za vaše styling potrebe. Za uporabo uvozite css3-mixins.scss in pokličite mixin v vašem CSS razredu.
Prenesite si to mešanico tukaj.
3. CssOwl
CssOwl nudi uporabne kombinacije za nastavitev položaja elementa (relativnega ali absolutnega) in dodajanje vsebine s psevdo selektorjem ( : after in : prej). Pomaga tudi, če želite ustvariti elemente sprite: mixin omogoča fleksibilnost pri nastavljanju položaja slike v vašem duhu. Poleg Sassa je na voljo tudi knjižnica CssOwl mixin za LESS in Stylus.
4. Prelomna točka Sass
Prelomna točka vam pomaga, da poenostavite poizvedbe medijev prek Sassa. S prekinitveno točko lahko ustvarite spremenljivke in ji podate vrednost, ki določa min-width ali max-width medijskih poizvedb. Ker je spremenljivka, ki ste jo ustvarili, smiselno ime, jo lahko preprosto pokličete za uporabo v Sassu.
5. Scut
Scut vsebuje nabor mešanic Sass za večkratno uporabo, ograde, funkcije in spremenljivke, ki vam olajšajo preprosto izvajanje skupnih vzorcev kodnih slogov. Zagotavlja kodo najboljše prakse za ustvarjanje spletnih stvari, kot so postavitve strani in tipografija oblikovanja. Pri pisanju kode lahko zmanjšate ponavljanje tako, da pogosteje uporabljate kodo. Tako vam pomagamo, da postanete bolj organizirani v procesu.
6. Žafran
S programom Saffron lahko zlahka dodate animacije in prehode CSS3. Na voljo je dvanajst animacij in prehodov, vključno z zbledelostjo / izstopom, drsenjem v / izstopu, dvigovanjem / izstopanjem, kot tudi raznimi učinki, kot so tresenje, drgnjenje, odbijanje in drugi. Če želite uporabiti Saffron, v deklaracijo Sass vključite mixin in pokličite ime učinka znotraj razreda CSS. Šafran lahko dobite tako, da ga namestite z Bowerjem ali Gemom, ali pa ga preprosto prenesete iz Githuba.
7. Vnesite Nastavitve
TypeSettings je vrsta orodja za Sass. Velikost pisave bo nastavljena v modularnem merilu z uporabo em (namesto rems ali pikslov), navpičnega ritma in odzivnih naslovov, ki temeljijo na razmerju. To lahko namestite tudi z Bowerjem, prenesete izdajo ali klonirate repo. Za več podrobnosti si oglejte njeno stran.
8. Sass Line
Sass Line je Sass mixin, ki vam pomaga izboljšati tipografijo. Uporablja rems enoto na vaši pisavi, tako da jo lahko delate sorazmerno z osnovno mrežo. Sass Line uporablja natančen navpični ritem, ki temelji na osnovni mreži, in vam omogoča, da nastavite modularno lestvico za vsako izmed vaših prelomnih točk, da dobite dobre deleže na vseh področjih vaše spletne strani..
Tukaj poiščite več podrobnosti o tem, kako ga uporabljati.
9. Andy.scss
Andy.scss je zbirka koristnih Sass mixinov, zgrajenih, da vam pomagajo razviti videz spletne strani z lahkoto, hkrati pa ohraniti lahkotnost. Na voljo je na ducate Sass mixinov, od ozadja do animacij. Tukaj so zajete skoraj vse lastnosti CSS. Spravi ga v Github.
Več objav na Sassu:
- Uvod v Sass
- Kopanje v Sass
- Kako sestaviti Sass s sublimno besedilo
- Uporaba programa Bootstrap 3 With Sass
- Kako zgraditi Online VCard s Sass & Compass
- Preprocesorji CSS v primerjavi: Sass Vs. MANJ
- Sintaktično osupljivi slogi: Uporaba kompasa v Sassu
- Kako pretvoriti CSS v Sass & SCSS
