9 „Mixin“ bibliotekos „Sass“ dizaineriams turėtų gauti
Jei naudojate „Sass“ savo kūrimo darbų eigoje, žinote „mixins“ svarbą. Kai pamatysite keletą dalykų, kurie yra parašyti nuolat ir nuoširdžiai CSS, čia mixins gali padėti išvengti pasikartojančio darbo. „Mixin“ yra CSS deklaracijos, kurias galite pakartotinai naudoti visoje svetainėje.
Kūrėjai rengia daugybę mišinių, kad padėtų jums dirbti su „Sass“ jūsų vystymosi procese. Dauguma jų apima daiktus, kurie dažnai kartojasi CSS. Nuo pritaikyti įvairiose naršyklėse į kurti mygtukus, animacijas ir perėjimo efektus, suraskite šią ir daugiau šių 11 mišrių bibliotekų, kurias turėtumėte gauti už savo „Sass“ kūrimą.
1. Bourbon
„Bourbon“ yra „Sass“ biblioteka, kurioje yra „mixin“, funkcijos ir priedai, leidžiantys jums supaprastinti stilių lentelių kūrimą naudodamiesi įvairiomis naršyklėmis. Man tai yra nuostabiausias Sassas. Jame yra beveik viskas, ko jums reikia, kad galėtumėte stiliuoti savo svetainę, o stiliaus lentelė paliekama lengva.
Išsamiai susipažinkite su visais dokumentais, kad galėtumėte naudoti kiekvieną turimą mišinį ir funkcijas.
2. Sass CSS3 mišiniai
„Sass CSS3 Mixins“ siūlo mišinius, kurie veikia skirtingose naršyklėse. Čia rasite daugybę geriausios praktikos mišinių, tokių kaip fonas, rėmelis, langelis, stulpelis, šriftų veidas, transformacija, perėjimas ir animacija. Tai pakankamai jūsų stiliaus poreikiams. Jei norite naudoti, importuokite css3-mixins.scss ir paskambinkite į savo CSS klasę.
Atsisiųskite šį mišinį čia.
3. CssOwl
„CssOwl“ suteikia naudingų mišinių, skirtų elemento (santykinio ar absoliutinio) padėčiai nustatyti ir turinį pridėti prie pseudo selektoriaus ( : po ir : anksčiau). Jis taip pat padeda, kai norite sukurti „Sprite“ elementus: „mixin“ suteikia lankstumo nustatyti vaizdo padėtį savo sprite. Be „Sass“, „CssOwl mixin“ biblioteka taip pat yra prieinama „LESS“ ir „Stylus“.
4. Sass pertraukos taškas
Lūžio taškas padeda jums paprasta atlikti žiniasklaidos užklausas per Sass. Naudodami pertraukos tašką, galite sukurti kintamuosius ir suteikti jam vertę, kuri apibrėžia min. pločio arba maksimalus plotis žiniasklaidos užklausų. Kadangi jūsų sukurtas kintamasis turi prasmingą pavadinimą, galite jį skambinti lengvai naudoti Sass.
5. Scut
„Scut“ yra daugkartinio naudojimo „Sass“ mišinių, vietos žymeklių, funkcijų ir kintamųjų rinkinys, kuris padeda lengvai įgyvendinti bendrus stiliaus kodo modelius. Ji suteikia geriausios praktikos kodą, kad sukurtų žiniatinklio dalykus, pvz., Puslapių išdėstymus ir stiliaus tipografiją. Jei galite rašyti kodą, galite pakartoti pakartotinį kodą dažniau. Taigi, padedant jums geriau organizuoti procesą.
6. Šafranas
Su „Saffron“ galite lengvai pridėti CSS3 animacijas ir perėjimus. Yra keliolika animacijų ir perėjimų, įskaitant išnykimą / išėjimą, skaidrę / išėjimą, padidėjimą / išvedimą, taip pat įvairius efektus, pvz., Purtyti, drebėti, atšokti ir kt. Norėdami naudoti „Saffron“, į „Sass“ deklaraciją įtraukite „mixin“ ir skambinkite efekto pavadinimu CSS klasėje. Jūs galite gauti „Saffron“ įdiegdami jį naudojant „Bower“ arba „Gem“, arba tiesiog jį atsisiųsti rankiniu būdu iš „Github“.
7. Įveskite Settings
„TypeSettings“ yra „Sass“ įrankių rinkinys. Jis nustatys šrifto dydį modulinėje skalėje, naudojant „em“ (vietoj „rems“ ar „pixels“), vertikalaus ritmo ir reaguojančių santykių. Šį įrenginį taip pat galite įdiegti su „Bower“, atsisiųskite išleidimą arba klonuoti repo. Daugiau informacijos rasite jos puslapyje.
8. Sass Line
„Sass Line“ yra „Sass“ mišinys, padedantis geriau spausdinti. Jis naudoja šriftu rems vienetą, kad galėtumėte jį dirbti proporcingai nuo bazinio tinklo. „Sass Line“ naudoja konkretų vertikalų ritmą, pagrįstą baziniu tinklu, ir leidžia jums nustatyti kiekvienos ištraukos taškų modulinę skalę, kad gautumėte geras proporcijas visuose jūsų svetainės aspektuose.
Eikite čia ir gaukite daugiau informacijos apie tai, kaip jį naudoti.
9. Andy.scss
Andy.scss - tai naudingų „Sass“ mišinių kolekcija, sukurta padėti jums lengvai išsiaiškinti svetainės išvaizdą ir išlaikyti jį šviesiai. Yra daugybė Sass mixins, nuo fono iki animacijos. Čia pateikiamos beveik visos dažniausiai naudojamos CSS savybės. Gaukite jį Githube.
Daugiau pranešimų apie „Sass“:
- Darbo pradžia su Sass
- Kasimas į Sassą
- Kaip sukomponuoti Sass su Sublime Text
- „Bootstrap 3“ naudojimas „Sass“
- Kaip sukurti internetinę „VCard“ su „Sass & Compass“
- CSS Preprocessors Palyginti: Sass Vs. Mažiau
- Syntactically Awesome stilių lentelės: naudojant kompasą Sass
- Kaip konvertuoti CSS į Sass & SCSS
