9 Mixin-bibliotek för Sass-designers ska få

Om du använder Sass i ditt utvecklingsarbete, vet du vikten av mixins. När du ser några saker som är skrivna upprepade gånger och tråkigt i CSS, det är där mixins kan hjälpa dig att förhindra repetitivt arbete. En blandning innehåller CSS-deklarationer som du kan återanvända på din webbplats.

Det finns många mixins som görs av utvecklare, för att hjälpa dig när du arbetar med Sass i din utveckling. De flesta täcker saker som ofta upprepas i CSS. Från anpassning över flera webbläsare till skapa knappar, animeringar och övergångseffekter, hitta det här och mer i följande 11 mixinbibliotek du borde få för din Sass-utveckling.

1. Bourbon

Bourbon är ett Sass-bibliotek som innehåller mixin, funktioner och tillägg som gör att du kan förenkla skapandet av stylesheets för användning i cross-browser. För mig är detta den mest underbara Sass mixin. Den innehåller nästan allt du behöver för att utforma din webbplats samtidigt som ditt stilark är lättviktigt.

Kolla in den fullständiga dokumentationen för att använda varje tillgänglig mixin och funktion.

2. Sass CSS3 Mixins

Sass CSS3 Mixins ger mixins som fungerar över olika webbläsare. Du hittar en massa bra övningar som här, bland annat bakgrund, ram, box, kolumn, font-face, transformation, övergång och animering. Det räcker för dina stylingbehov. För att använda, importera CSS3-mixins.scss och ring blandningen i din CSS-klass.

Ladda ner denna mixin här.

3. CssOwl

CssOwl ger användbara mixins för att ställa in ett element (relativt eller absolut), och lägga till innehåll med pseudoväljaren ( :efter och :innan). Det hjälper också när du vill skapa sprite-element: mixin ger flexibilitet för att ställa in bildpositionen i din sprite. Förutom Sass är CssOwl mixin-biblioteket även tillgängligt för LESS och Stylus.

4. Breakpoint Sass

Breakpoint hjälper dig att göra mediafrågor via Sass på ett enkelt sätt. Med Breakpoint kan du skapa variabler och ge det ett värde som definierar min-bredd eller maximal bredd av mediafrågor. Eftersom variabeln du har skapat har ett meningsfullt namn kan du ringa det enkelt för användning i Sass.

5. Scut

Scut innehåller en uppsättning återanvändbara Sass mixins, platshållare, funktioner och variabler som hjälper dig att enkelt implementera vanliga stilkodsmönster. Det ger bästa praxis kod för att skapa webb saker som sidlayouter och i styling typografi. Du kan klippa upp repetition när du skriver kod genom att använda koden oftare. Således hjälper du dig att bli mer organiserad i processen.

6. Saffron

Med Saffron kan du enkelt lägga till CSS3-animationer och övergångar. Det finns ett dussin animationer och övergångar tillgängliga, inklusive blekna in / ut, skjut in / ut, stiga in / ut, samt diverse effekter som skaka, teeter, studsa och andra. För att använda Saffron, inkludera bara mixin i Sass-deklarationen och ring effektnamnet i din CSS-klass. Du kan få Saffron genom att installera den med Bower eller Gem, eller bara ladda ner den manuellt från Github.

7. Skriv inställningar

TypeSettings är en typ av verktygssats för Sass. Det kommer att ställa in fontstorlek i modulär skala med hjälp av em (istället för rems eller pixlar), vertikalt rytm och responsiva förhållande baserade rubriker. Du kan också installera den här med Bower, ladda ner utgåvan eller klona repo. För mer information, kolla in sidan.

8. Sass Line

Sass Line är en Sass mixin som hjälper dig att göra bättre typografi. Den använder rems-enhet på din teckensnitt så att du kan arbeta det proportionellt från grunnlinjen. Sass Line använder en exakt vertikal rytm baserad på grunnlinjen och låter dig ställa in en modulär skala för var och en av dina brytpunkter för att få bra proportioner över alla aspekter av din webbplats.

Gå hit för att få mer information om hur du använder den.

9. Andy.scss

Andy.scss är en samling användbara Sass mixins, som är konstruerad för att hjälpa dig att utveckla en webbsida med lätthet, samtidigt som den håller ljuset. Det finns dussintals Sass mixins tillgängliga, från bakgrunden till animationer. Nästan alla vanliga CSS-egenskaper används här. Hämta det på Github.

Fler inlägg på Sass:

• Komma igång med Sass
• Grävning i Sass
• Hur man sammanställer Sass med Sublime Text
• Använda Bootstrap 3 med Sass
• Hur man bygger ett online VCard med Sass & Compass
• CSS Preprocessors Jämfört: Sass Vs. MINDRE
• Syntactically Awesome Stylesheets: Använda Kompass I Sass
• Så här konverterar du CSS till Sass & SCSS