9 Mixin Biblioteker For Sass Designers Should Get
Hvis du bruker Sass i utviklingsarbeidet, vet du betydningen av mixins. Når du ser noen ting som er skrevet gjentatte ganger og kjedelig i CSS, Det er der mixins kan hjelpe deg med å forhindre repeterende arbeid. En blanding inneholder CSS-erklæringer som du kan bruke på nytt på hele nettstedet ditt.
Det er mange mixins laget av utviklere, for å hjelpe deg når du jobber med Sass i din utvikling. De fleste dekker ting som ofte gjentas i CSS. Fra tilpasse seg over flere nettlesere til skaper knapper, animasjoner og overgangseffekter, finn dette og mer i de følgende 11 mixin-bibliotekene du bør få for Sass-utviklingen din.
1. Bourbon
Bourbon er et Sass-bibliotek som inneholder mixin, funksjoner og tillegg som lar deg forenkle opprettelsen av stilark for bruk av kryssbrowser. For meg er dette den mest fantastiske Sass mixin. Den inneholder nesten alt du trenger for å utforme nettstedet ditt mens du holder stilarket lett.
Sjekk ut den komplette dokumentasjonen for å bruke hver tilgjengelig mixin og funksjon.
2. Sass CSS3 Mixins
Sass CSS3 Mixins gir mixins som fungerer over forskjellige nettlesere. Du finner en mengde best-practice mixins her som bakgrunn, ramme, boks, kolonne, font-face, transform, overgang og animasjon. Det er nok for stylingbehovene dine. For å bruke, importere CSS3-mixins.scss og ring mixin i CSS-klassen din.
Last ned denne mixen her.
3. CssOwl
CssOwl gir nyttige mikser for å angi posisjonen til et element (relative eller absolutt) og legge til innhold med pseudovelgeren ( :etter og :før). Det hjelper også når du vil opprette spriteelementer: mixin gir fleksibilitet til å sette bildeposisjonen i sprite. I tillegg til Sass er CssOwl mixin-biblioteket også tilgjengelig for LESS og Stylus.
4. Breakpoint Sass
Breakpoint hjelper deg med å gjøre medieforespørsler gjennom Sass på en enkel måte. Med Breakpoint kan du opprette variabler og gi den en verdi som definerer en minstebredde eller max bredde av media spørringer. Siden variabelen du har opprettet, har et meningsfylt navn, kan du ringe det enkelt for bruk i Sass.
5. Scut
Scut inneholder et sett med gjenbrukbare Sass mixins, plassholdere, funksjoner og variabler som hjelper deg med å enkelt implementere vanlige stilkode mønstre. Den gir best practice kode for å lage web-ting som sideoppsett og styling typografi. Du kan kutte ned repetisjon når du skriver kode ved å gjenbruke koden oftere. Dermed hjelper du deg med å bli mer organisert i prosessen.
6. Saffron
Med Saffron kan du enkelt legge til CSS3 animasjoner og overganger. Det er et dusin animasjoner og overganger tilgjengelig, inkludert fade inn / ut, skyve inn / ut, stige inn / ut, samt diverse effekter som shake, teeter, sprette og andre. For å bruke Saffron bare inkludere mixin i Sass-erklæringen, og ring effektenavnet inni CSS-klassen din. Du kan få Saffron ved å installere den ved hjelp av Bower eller Gem, eller bare last ned den manuelt fra Github.
7. Skriv inn innstillinger
TypeSettings er en type verktøykasse for Sass. Den vil sette skriftstørrelse i modulær skala ved hjelp av em (i stedet for rems eller piksler), vertikal rytme og responsiv forhold basert overskrifter. Du kan også installere denne med Bower, laste ned utgivelsen eller klone repoen. For mer informasjon, sjekk ut siden.
8. Sass Line
Sass Line er en Sass mixin som hjelper deg med å få bedre typografi. Den bruker remsenhet på skriften din slik at du kan jobbe den i forhold til grunnlinjen. Sass Line bruker en presis vertikal rytme basert på grunnlinjen, og lar deg sette en modulær skala for hver av dine pausepunkter for å få gode proporsjoner på alle sider av nettstedet ditt.
Gå her for å få mer informasjon om hvordan du bruker den.
9. Andy.scss
Andy.scss er en samling av nyttige Sass mixins, bygget for å hjelpe deg med å utvikle et nettsteds utseende med letthet mens du holder det lys. Det finnes dusinvis av Sass mixins, fra bakgrunner til animasjoner. Nesten alle vanlige CSS-egenskaper er dekket her. Få det på Github.
Flere innlegg på Sass:
- Komme i gang med Sass
- Grave inn i Sass
- Hvordan kompilere Sass med Sublime Text
- Bruke Bootstrap 3 med Sass
- Slik bygger du et online VCard med Sass & Compass
- CSS Preprocessors Sammenlignet: Sass Vs. MINDRE
- Syntactically Awesome Stylesheets: Bruk av kompass i Sass
- Slik konverterer du CSS til Sass og SCSS
