9 Mixin Libraries For Sass Designers Should Get

Hvis du bruger Sass i din udviklingsarbejdsproces, ved du vigtigheden af mixins. Når du ser nogle ting, der er skrevet gentagne gange og kedeligt i CSS, det er her mixins kan hjælpe dig med at forhindre gentagende arbejde. En blanding indeholder CSS-erklæringer, som du kan genbruge på hele dit websted.

Der er mange mixins lavet af udviklere, for at hjælpe dig, når du arbejder med Sass i din udvikling. De fleste dækker ting, der ofte gentages i CSS. Fra Tilpasning på tværs af flere browsere til skabe knapper, animationer og overgangseffekter, find dette og mere i de følgende 11 mixin-biblioteker, du bør få til din Sass-udvikling.

1. Bourbon

Bourbon er et Sass-bibliotek, der indeholder mixin, funktioner og tilføjelser, der gør det muligt at forenkle oprettelsen af stylesheets til brug af cross-browser. For mig er dette den mest fantastiske Sass mixin. Den indeholder næsten alt, hvad du behøver for at style dit websted, samtidig med at dit stilark er letvægts.

Tjek den komplette dokumentation for at bruge hver tilgængelig mixin og funktion.

2. Sass CSS3 Mixins

Sass CSS3 Mixins giver mixins, der fungerer på tværs af forskellige browsere. Du finder en flok best-practice mixins her som baggrund, ramme, boks, kolonne, skrifttype-ansigt, transformation, overgang og animation. Det er nok til dine styling behov. For at bruge, skal du importere CSS3-mixins.scss og ring til mixin i din CSS klasse.

Download denne mixin her.

3. CssOwl

CssOwl giver nyttige mixins til at indstille placeringen af et element (relative eller absolut) og tilføje indhold med pseudovælgeren ( :efter og :Før). Det hjælper også, når du vil oprette sprite elementer: mixin giver fleksibilitet til at indstille billedpositionen i din sprite. Ud over Sass er CssOwl mixin-biblioteket også tilgængeligt for LESS og Stylus.

4. Breakpoint Sass

Breakpoint hjælper dig med at foretage medieforespørgsler gennem Sass på en enkel måde. Med Breakpoint kan du oprette variabler og give den en værdi, der definerer min-bredde eller max-bredde af medieforespørgsler. Da den variabel, du har oprettet, har et meningsfuldt navn, kan du nemt kalde det til brug i Sass.

5. Scut

Scut indeholder et sæt genanvendelige Sass mixins, pladsholdere, funktioner og variabler, der hjælper dig med nemt at implementere almindelige stil-kode mønstre. Det giver bedste praksis kode til at skabe web ting som side layout og i styling typografi. Du kan skære ned gentagelse, når du skriver kode ved at genbruge koden oftere. Dermed hjælper du dig med at blive mere organiseret i processen.

6. Saffron

Med Saffron kan du nemt tilføje CSS3 animationer og overgange. Der er et dusin animationer og overgange tilgængelige, herunder fade in / out, glide ind / ud, stige ind / ud, samt diverse effekter som shake, teeter, hoppe og andre. For at bruge Saffron skal du blot inkludere mixin i Sass-erklæringen og kalde effektnavnet i din CSS-klasse. Du kan få Saffron ved at installere den ved hjælp af Bower eller Gem, eller bare download den manuelt fra Github.

7. Skriv indstillinger

TypeSettings er en type værktøjssæt til Sass. Det vil indstille skrifttypestørrelse i modulær skala ved hjælp af em (i stedet for rems eller pixels), lodret rytme og responsiv forhold baseret overskrifter. Du kan også installere denne med Bower, download udgivelsen eller klone repoen. For flere detaljer, tjek dens side.

8. Sass Line

Sass Line er en Sass mixin, der hjælper dig med at få bedre typografi. Det bruger rems-enhed på din skrifttype, så du kan arbejde det i forhold til basislinjenettet. Sass Line bruger en præcis lodret rytme baseret på basislinjenettet, og lader dig indstille en modulær skala for hvert af dine breakpoints for at få gode proportioner på tværs af alle aspekter af din hjemmeside.

Gå her for at få flere oplysninger om, hvordan du bruger det.

9. Andy.scss

Andy.scss er en samling af nyttige Sass mixins, der er udviklet til at hjælpe dig med at udvikle et websteds udseende med lethed, mens du holder det lys. Der er snesevis af Sass mixins tilgængelige, fra baggrunde til animationer. Næsten alle almindeligt anvendte CSS-egenskaber er omfattet her. Hent det hos Github.

Flere indlæg på Sass:

Kom i gang med Sass
Grave ind i Sass
Sådan kompilerer du Sass med sublim tekst
Brug af Bootstrap 3 med Sass
Sådan opbygger du et online VCard med Sass & Compass
CSS Preprocessors Sammenlignet: Sass Vs. MINDRE
Syntactically Awesome Stylesheets: Brug af kompas i Sass
Sådan konverteres CSS til Sass & SCSS