9 Mixini raamatukogud Sass Designers peaks saama

Kui kasutate Sass'i oma arendustöö käigus, siis teate mikside tähtsust. Kui näed mõningaid asju, mis on kirjutatud CSS-is korduvalt ja tüütult, seal saab segamini aidata vältida korduvat tööd. Segu sisaldab CSS-deklaratsioone, mida saate kogu saidil uuesti kasutada.

Arendajad teevad palju segusid, et aidata teil Sassiga töötamisel töötada. Enamik katab asju, mis sageli korduvad CSS-is. Alates kohandamine mitme brauseri vahel kuni nuppude, animatsioonide ja üleminekuefektide loomine, leidke see ja rohkem järgmistest 11 mixin raamatukogust, mida peaksite saama oma Sassi arendamiseks.

1. Bourbon

Bourbon on Sassi raamatukogu, mis sisaldab mixini, funktsioone ja lisandeid, mis võimaldavad lihtsustada veebilehtedel kasutatavate stiilide loomist. Minu jaoks on see kõige imelisem Sass mixin. See sisaldab peaaegu kõike, mida vajate oma veebilehe kujundamiseks, hoides oma stiilile kerge.

Vaadake täielikku dokumentatsiooni, et kasutada kõiki olemasolevaid segusid ja funktsioone.

2. Sass CSS3 segud

Sass CSS3 Mixinid pakuvad erinevaid brausereid. Siit leiate hulga parimate tavade segusid nagu taust, piir, karp, veerg, font-nägu, teisendus, üleminek ja animatsioon. See on teie stiilivajaduste jaoks piisav. Et kasutada, importige css3-mixins.scss ja helistage oma CSS-klassi.

Laadige see segu siia.

3. CssOwl

CssOwl pakub kasulikke segusid, et määrata elemendi asukoht (suhteline või absoluutne) ja lisada sisu pseudo-valijaga ( : pärast ja : enne). See aitab ka siis, kui soovite luua sprite elemente: mixin annab paindlikkuse, et määrata oma positsioon pildil. Lisaks Sassile on saadaval ka CssOwl mixin raamatukogu LESS ja Stylus jaoks.

4. Murdepunkt Sass

Murdepunkt aitab teil meedia päringut Sass'i abil lihtsal viisil teha. Murdepunkti abil saate luua muutujaid ja anda sellele väärtuse, mis määratleb min-laius või maksimaalne laius meedia päringute kohta. Kuna teie loodud muutuja on tähendusrikas nimi, võite seda Sassis lihtsalt kasutada.

5. Scut

Scut sisaldab mitmeid korduvkasutatavaid Sass segusid, kohahoidjaid, funktsioone ja muutujaid, mis aitavad hõlpsasti rakendada ühiseid stiilikoodimustreid. See pakub parimate tavade koodi, et luua veebimaterjale, nagu lehekülje paigutus ja tüpograafia kujundamine. Koodide kirjutamise ajal saate kordamist vähendada, kordades koodi korduvalt. Seega, aidates teil protsessi paremini organiseerida.

6. safran

Saffroni abil saate hõlpsasti lisada CSS3 animatsioone ja üleminekuid. Saadaval on kümmekond animatsiooni ja üleminekut, sealhulgas fade in / out, slaidi sisse- / väljalülitamine, tõus sisse / välja, samuti mitmesugused efektid, nagu raputamine, teeter, põrge ja teised. Saffroni kasutamiseks kasutage lihtsalt Sass deklaratsiooni ja kutsuge efekti nimi oma CSS klassi sisse. Saffroni saate installida Boweri või Gem'i abil või lihtsalt laadige see käsitsi Githubilt.

7. Tippige seaded

TypeSettings on Sassile mõeldud tööriistakomplekt. See määrab kirjasuuruse modulaarses skaalal, kasutades em (asemel rems või pikslit), vertikaalset rütmi ja reageerivat suhetel põhinevaid pealkirju. Võite selle installida ka Boweriga, lae alla või kloonida repo. Lisateabe saamiseks vaadake selle lehekülge.

8. Sass Line

Sass Line on Sass mixin, mis aitab teil paremini tüpograafiat teha. See kasutab teie fondil remsiühikut, et saaksite seda töötada võrdeliselt baasvõrgust. Sass Line kasutab täpset vertikaalset rütmi, mis põhineb baasvõrgustikul, ja võimaldab teil määrata iga murdepunkti jaoks modulaarse skaala, et saada oma veebisaidi kõikides aspektides head proportsioonid.

Lisateavet selle kasutamise kohta leiate siit.

9. Andy.scss

Andy.scss on kogumik kasulikke Sass-segusid, mis on loodud selleks, et aidata teil veebilehe välimust kergesti arendada, hoides seda kergelt. Saadaval on kümneid Sassi segusid, taustast animatsioonini. Siin käsitletakse peaaegu kõiki tavapäraselt kasutatavaid CSS-omadusi. Hangi see Githubis.

Veel postitusi Sassil:

• Sassiga alustamine
• Sassile kaevamine
• Kuidas kompileerida Sass Sublime Textiga
• Bootstrap 3 kasutamine Sassiga
• Kuidas ehitada Online VCard Sass & Compassiga
• CSS eelprotsessorid: Sass Vs. Vähem
• Syntaktiliselt awesome stiilid: kompassi kasutamine Sassis
• Kuidas teisendada CSS to Sass & SCSS