9 Mixin kirjastoa Sass-suunnittelijoille pitäisi saada
Jos käytät Sassia kehitystyönkulussa, tiedät sekojen tärkeyden. Kun näet joitakin kirjoitettuja asioita CSS: ssä toistuvasti ja tylsästi, Silloin mixins voi auttaa sinua estämään toistuvia töitä. Sekoitus sisältää CSS-ilmoituksia, joita voit käyttää uudelleen koko sivustossasi.
Kehittäjät tekevät monia sekoja, jotka auttavat sinua työskentelemässä Sassin kanssa kehityksessänne. Useimmat käsittelevät asioita, jotka toistuvat usein CSS: ssä. alkaen mukauttaminen useisiin selaimiin että luoda painikkeita, animaatioita ja siirtymävaiheita, löytää tämä ja enemmän seuraavista 11 sekoituskirjastosta, jotka sinun pitäisi saada Sass-kehityksestäsi.
1. Bourbon
Bourbon on Sass-kirjasto, joka sisältää mixinin, toimintoja ja lisäosia, joiden avulla voit yksinkertaistaa tyylitaulukoiden luomista selainkäyttöä varten. Minulle tämä on ihmeellisin Sass-sekoitus. Se sisältää melkein kaiken, mitä tarvitset sivustosi tyyliin tyylikkäästi.
Tutustu täydelliseen dokumentaatioon, jotta voit käyttää jokaista käytettävissä olevaa sekoitusta ja toimintaa.
2. Sass CSS3 Mixins
Sass CSS3 Mixins tarjoaa sekoittimia, jotka toimivat eri selaimissa. Löydät joukon parhaita käytäntöjä, kuten taustaa, reunaa, laatikkoa, saraketta, kirjasintyyppiä, muunnosta, siirtymistä ja animaatiota. Se riittää tyylisi tarpeisiin. Jos haluat käyttää, tuo CSS3-mixins.scss ja soita sekoitus CSS-luokassasi.
Lataa tämä sekoitus täältä.
3. CssOwl
CssOwl tarjoaa hyödyllisiä sekoituksia elementin (suhteellisen tai absoluuttisen) sijainnin asettamiseksi ja sisällön lisäämiseksi näennäisvalitsimella ( :jälkeen ja :ennen). Se auttaa myös silloin, kun haluat luoda sprite-elementtejä: sekoitus antaa joustavuuden asettaa kuvan sijainnin sprite-laitteessasi. Sassin lisäksi CssOwl-sekoituskirjasto on saatavana myös LESS: lle ja Stylukselle.
4. Breakpoint Sass
Breakpoint auttaa sinua tekemään mediatiedostoja Sassin kautta yksinkertaisella tavalla. Breakpointilla voit luoda muuttujia ja antaa sille arvon, joka määrittää min-leveys tai max-width tiedotusvälineiden kyselyistä. Koska luomallasi muuttujalla on merkityksellinen nimi, voit kutsua sitä helposti käytettäväksi Sassissa.
5. Scut
Scut sisältää joukon uudelleenkäytettäviä Sass-sekoittimia, paikkamerkkejä, toimintoja ja muuttujia, joiden avulla voit helposti toteuttaa yhteisiä tyyli-koodikuvioita. Se tarjoaa parhaiden käytäntöjen koodin, jolla luodaan web-tavaroita, kuten sivun asettelua ja typografiaa. Voit pienentää toistoa koodin kirjoittamisessa uudelleen käyttämällä koodia useammin. Näin autat sinua järjestämään enemmän prosessia.
6. Saffron
Saffronin avulla voit lisätä CSS3-animaatioita ja siirtymiä helposti. Saatavilla on tusinaa animaatioita ja siirtymiä, mukaan lukien häipyminen sisään / ulos, liukua sisään / ulos, nousu sisään ja ulos sekä sekalaiset vaikutukset, kuten ravistelu, teeter, pomppia ja muut. Jos haluat käyttää Saffronia, ota vain sekoitus Sass-ilmoitukseen ja soita efektin nimi CSS-luokassa. Voit saada Saffronin asentamalla sen Bowerin tai Gemin avulla tai lataamalla sen manuaalisesti Githubista.
7. Kirjoita Asetukset
TypeSettings on Sassin työkalupakki. Se asettaa kirjasinkoon modulaarisessa mittakaavassa käyttämällä em: ää (rems tai pikseli), pystysuuntaista rytmiä ja reagoivaa suhdelukua. Voit asentaa tämän myös Boweriin, ladata julkaisun tai kloonata repon. Lisätietoja saat sivulta.
8. Sass Line
Sass Line on Sass-sekoitus, joka auttaa tekemään parempaa typografiaa. Se käyttää kirjasimessa olevaa rems-yksikköä, jotta voit työskennellä sen kanssa suhteessa perusverkkoon. Sass Line käyttää tarkkaa vertikaalista rytmiä perustasoon perustuvan ruudukon perusteella ja mahdollistaa modulaarisen mittakaavan määrittämisen jokaiselle katkaisukohdalle saadaksesi hyvät mittasuhteet sivustosi kaikkiin osiin.
Mene tänne saadaksesi lisätietoja siitä, miten sitä käytetään.
9. Andy.scss
Andy.scss on kokoelma hyödyllisiä Sass-sekoittimia, jotka on rakennettu auttamaan sinua kehittämään verkkosivuston ulkoasua kevyesti. On olemassa kymmeniä Sass-sekoittimia, taustoista animaatioihin. Lähes kaikki yleisesti käytetyt CSS-ominaisuudet sisältyvät tähän. Hanki se Githubissa.
Lisää viestejä Sassissa:
- Aloittaminen Sassin kanssa
- Kaivaminen Sassiin
- Sassin kääntäminen Sublime-tekstillä
- Bootstrap 3: n käyttäminen Sassin avulla
- Online-kortin luominen Sass & Compassilla
- CSS-esiprosessorit verrattuna: Sass Vs. VÄHEMMÄN
- Syntaktisesti awesome-tyylit: kompassin käyttäminen Sassissa
- Miten muuntaa CSS: n Sass & SCSS: iin
