9 Mixin könyvtárak a Sass Designerek számára
Ha a Sass-ot a fejlesztési munkafolyamatban használja, ismeri a mixin fontosságát. Amikor látsz néhány dolgot, amit írtál ismételten és unalmasan a CSS-ben, ez az, ahol a mixins segítenek megakadályozni az ismétlődő munkát. A mixin olyan CSS-nyilatkozatokat tartalmaz, amelyeket az egész webhelyén újra felhasználhat.
A fejlesztők sok mixint készítenek, hogy segítsen neked a Sass-szal való együttműködés során. A legtöbb a CSS-ben gyakran ismétlődő dolgokat fedi le. Tól től több böngészőben nak nek gombok, animációk és átmeneti hatások létrehozása, találja meg ezt és még többet a következő 11 mixin könyvtárban, amit a Sass fejlesztésért kell kapnia.
1. Bourbon
A Bourbon egy Sass könyvtár, amely mixint, függvényeket és addonsokat tartalmaz, amelyek lehetővé teszik a stíluslapok létrehozását a böngésző számára. Számomra ez a legcsodálatosabb Sass mixin. Ez szinte mindent tartalmaz, amire szüksége van a webhely stílusához, miközben a stíluslapja könnyű.
Nézze meg a teljes dokumentációt, hogy minden rendelkezésre álló keveréket és funkciót használjon.
2. Sass CSS3 keverékek
A Sass CSS3 Mixins különböző böngészőkben működő mixineket kínál. Itt találsz egy csomó legjobb gyakorlatot, például hátteret, szegélyt, dobozt, oszlopot, betűtípust, átalakítást, átmenetet és animációt. Ez elég a stílus igényeihez. A CSS3-mixins.scss és hívja a mixint a CSS osztályában.
Töltse le a mixint itt.
3. CssOwl
A CssOwl hasznos elegyeket biztosít az elem (relatív vagy abszolút) helyzetének beállításához, és tartalmat ad hozzá a pszeudo-választóval ( :után és :előtt). Ez is segít, ha sprite elemeket kíván létrehozni: a mixin rugalmasságot biztosít a kép pozíciójának beállításához a sprite-ben. A Sass mellett a CssOwl mixin könyvtár is elérhető a LESS és a Stylus számára.
4. Sass töréspont
A töréspont segítségével könnyedén el lehet végezni a Sass segítségével a média lekérdezéseit. A törésponttal változókat hozhat létre, és megadhat egy értéket, amely meghatározza a min-width vagy max-width média lekérdezések. Mivel a létrehozott változónak értelmes neve van, könnyen hívható Sass-ban.
5. Scut
A Scut tartalmaz egy sor újrafelhasználható Sass mixint, helyőrzőt, funkciót és változót, amelyek segítségével könnyen megvalósíthatja a közös stíluskódokat. A legjobb gyakorlati kódot nyújtja webes dolgok létrehozásához, például az oldalelrendezésekhez és a tipográfia stílusához. A kód írásakor az ismétlést a kód ismételt felhasználásával csökkentheti. Így segít abban, hogy jobban megszervezzék a folyamatot.
6. Sáfrány
A Saffron segítségével könnyedén hozzáadhat CSS3 animációkat és átmeneteket. Van egy tucat animáció és átmenet, beleértve a be- és kikapcsolódást, a be- és kikapcsolást, a be- és kikapcsolást, valamint a különféle effektusokat, mint például a rázás, a fogás, a visszapattanás és mások. A sáfrány használatához csak a Sass nyilatkozatba vegye fel a mixint, és hívja a hatásnevet a CSS osztályon belül. A Saffronot Bower vagy Gem használatával telepítheti, vagy csak töltse le manuálisan a Githubból.
7. Írja be a Beállítások parancsot
A TypeSettings egy eszközkészlet a Sass számára. A betűméretet moduláris skálán fogja beállítani em (helyett rems vagy pixel), függőleges ritmus és érzékeny arány alapú címsorok használatával. Ezt a Bowerrel is telepítheti, letöltheti a kiadást, vagy klónozhatja a repót. További részletekért nézze meg az oldalát.
8. Sass Line
A Sass Line egy Sass mixin, amely segít a jobb tipográfiában. A rems egységet használja a betűkészleten úgy, hogy az alapszintű rácsról arányosan dolgozhasson. A Sass Line egy pontos függőleges ritmust használ az alapvonal rács alapján, és lehetővé teszi, hogy minden töréspontja számára moduláris skálát állítson be, hogy jó arányokat érjen el webhelyének minden aspektusában.
Menjen ide, hogy többet tudjon meg arról, hogyan kell használni.
9. Andy.scss
Andy.scss hasznos Sass mixinek gyűjteménye, melynek segítségével könnyedén megtervezheti a weboldal megjelenését. Több tucat Sass mixin áll rendelkezésre, a hátterektől az animációkig. Itt szerepelnek majdnem minden általánosan használt CSS tulajdonság. Szerezd meg Githubban.
További hozzászólások a Sass-on:
- Első lépések a Sass-al
- Sass-ba ásni
- Hogyan készítsük el a Sass-t a Sublime szöveggel
- A Bootstrap 3 használata Sass segítségével
- Hogyan készítsünk Online VCard-ot Sass & Compass segítségével
- CSS előfeldolgozók összehasonlítva: Sass Vs. KEVÉSBÉ
- Szintaktikusan félelmetes stíluslapok: az iránytű használata Sass-ban
- Hogyan lehet átalakítani a CSS-t a Sass-ra és az SCSS-re
