Mixins i SASS

Denne artikkelen forklarer mixins i SASS.

Vi forklarer mixins i SASS med praktiske eksempler.

YouTube Video

Mixins i SASS

Oversikt – Hva er en Mixin?

Mixins er en mekanisme som lar deg definere ofte brukte sett av stil-egenskaper som gjenbrukbare funksjoner, som du kan kalle på der det er nødvendig. De er svært nyttige for å holde CSS-klasser og flere egenskaper DRY (Don't Repeat Yourself).

Eksempel: Den enkleste mixinen

Nedenfor er et enkelt eksempel på en mixin som gjenbruker border-radius og box-shadow sammen. Ved å bruke denne mixinen kan du gi flere elementer samme utseende.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8.card {
 9  @include card-style;
10  padding: 1rem;
11}

• Med denne mixinen trenger du ikke å gjenta stiler direkte.
• Det krever bare én linje å bruke den: @include card-style;.

Mixins med argumenter (parametere)

Mixins kan ta imot argumenter, akkurat som funksjoner. Dette gjør at du kan endre utseendet med samme logikk. Her er et eksempel hvor farge tas inn som et argument.

 1// Mixin with parameters: accepts a color and optional radius
 2@mixin colored-box($bg-color, $radius: 4px) {
 3  background-color: $bg-color;
 4  border-radius: $radius;
 5  padding: 0.75rem;
 6}
 7
 8.box-primary {
 9  @include colored-box(#007acc);
10}
11
12.box-custom {
13  @include colored-box(#ffcc00, 12px);
14}

• Ved å oppgi en standardverdi kan du styre oppførselen når et argument utelates.
• I dette eksemplet brukes standard radius, og bare bakgrunnsfargen overstyres.

Tilfeller hvor variadiske argumenter (...) brukes

Når du vil ta imot flere verdier, kan du bruke variadiske argumenter ($args...). Dette er nyttig for å generere verktøyklasser eller sende fallback-lister.

Det er hjelpsomt når du trenger å sende flere fontfamilier eller flere skyggeverdier.

1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3  box-shadow: $shadows;
4}
5
6.panel {
7  @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}

• På kallesiden kan du sende flere skygger adskilt med komma.
• På denne måten kan du bruke samme mixin for både enkle og komplekse skygger.

Mixins med @content — Motta et blokk

Med @content kan en mixin motta en blokk med stiler fra koden som kaller. Dette lar mixinen tilby en felles-innpakning mens den som kaller angir innholdet.

 1// Mixin that sets up a responsive container and yields to caller via @content
 2@mixin responsive-container($max-width: 1200px) {
 3  margin-left: auto;
 4  margin-right: auto;
 5  padding-left: 1rem;
 6  padding-right: 1rem;
 7  max-width: $max-width;
 8
 9  @content; // place where caller's styles are inserted
10}
11
12.header {
13  @include responsive-container(1000px) {
14    display: flex;
15    align-items: center;
16    justify-content: space-between;
17  }
18}

• På kallesiden kan du legge til en blokk til @include for å sette inn stiler inni.
• Dette mønsteret er nyttig for layout-innpakninger som grids, kort og skjemaer.

Avanserte mixins med betingelser og løkker

Kontrollstrukturer som @if og @for kan brukes i mixins. Du kan bruke disse for å automatisere opprettelse av verktøyklasser og gruppere responsive innstillinger.

Nedenfor er et eksempel på automatisk generering av bredder for hjelpeklasser.

 1@use 'sass:math';
 2
 3// Mixin that generates width utility classes from a list of fractions
 4@mixin generate-widths($fractions) {
 5  @each $name, $fraction in $fractions {
 6    .w-#{$name} {
 7      width: math.percentage($fraction);
 8    }
 9  }
10}
11
12$widths: (
13  '1-4': 0.25,
14  '1-3': 0.3333,
15  '1-2': 0.5,
16  '3-4': 0.75
17);
18
19@include generate-widths($widths);

• Ved å bare sende med et kart over brøkene du ønsker å generere på kall-siden, kan du automatisk generere de tilhørende verktøysklassene på én gang.
• Å bruke denne tilnærmingen har fordelen av å redusere manuelle stiledefinisjoner samtidig som du opprettholder konsistens i designet ditt.

Mixins vs Placeholder (%placeholder)

Mens mixins setter inn et sett med egenskaper direkte, brukes plassholdere med @extend når man arver stiler. Mixins kan i noen tilfeller generere duplikat CSS, men @extend kan produsere mer kompakt CSS i visse situasjoner.

Ved å forstå hensikten med og forskjellene i CSS generert av hver metode, vil du kunne velge den mest optimale tilnærmingen.

 1// Placeholder example (for comparison)
 2%btn-base {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn-primary {
 9  @extend %btn-base;
10  background: #007acc;
11  color: #fff;
12}
13
14.btn-secondary {
15  @extend %btn-base;
16  background: #e0e0e0;
17}

• Når du bruker @extend på en plassholder, kan flere selektorer slås sammen til én regel, noe som gir mer kompakt CSS.
• På den annen side, siden mixins setter inn egenskaper direkte der det trengs, gir de fleksibilitet og hjelper til med å unngå utilsiktet sammenkobling av selektorer.

Vanlige praktiske mønstre (Responsivt, vendor-prefikser osv.)

I praksis er det nyttig å legge vanlige prosesser som vendor-prefikser og responsive funksjoner i mixins. Nedenfor er et eksempel som kombinerer transform og prefiks-egenskaper. Du kan sentralisere kode for nettleserkompatibilitet, noe som gjør vedlikehold enklere.

 1// Mixin for transform with vendor prefixes
 2@mixin transform($value) {
 3  -webkit-transform: $value;
 4  -ms-transform: $value;
 5  transform: $value;
 6}
 7
 8.icon-rotate {
 9  @include transform(rotate(45deg));
10}

• Bruken er enkel, og du kan bruke det hvor som helst, for eksempel @include transform(rotate(10deg));.
• Selv om prefikser skulle bli unødvendige i fremtiden, blir vedlikehold enklere fordi en oppdatering av mixinen vil reflektere endringen gjennom hele kodebasen din.

Praktisk eksempel: Kort og knapper kombinert

Nedenfor er et eksempel der knappestilene som brukes i kortet er forent med en mixin, slik at de kan endres i henhold til temafargen.

Dette organiserer det vanlige 'kort + knapp'-mønsteret ved hjelp av mixins.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8// Mixin for transform with vendor prefixes
 9@mixin transform($value) {
10  -webkit-transform: $value;
11  -ms-transform: $value;
12  transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17  display: inline-block;
18  padding: $padding;
19  background: $bg;
20  color: $color;
21  border-radius: 6px;
22  text-decoration: none;
23  cursor: pointer;
24  @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29  @include card-style; // reuse earlier card-style mixin
30  padding: $gap;
31  @content;
32}
33
34.card-feature {
35  @include card {
36    .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37    .cta {
38      @include btn(#007acc);
39    }
40  }
41}
42
43.card-warning {
44  @include card {
45    .title { font-weight: bold; }
46    .cta {
47      @include btn(#ff6600);
48    }
49  }
50}

• Ved å bruke disse mixins kan du skrive komponenter kortfattet.

Vær oppmerksom på ytelse og generert CSS

Siden mixins setter inn egenskaper hver gang de brukes, kan omfattende bruk av @include for samme regel gjøre slutt-CSS-en større. Du kan optimalisere ved å kombinere dem med placeholders og komponentdesign når det trengs.

Videre er følgende tiltak også effektive.

• Stiler som brukes ofte bør gjøres om til klasser for gjenbruk.
• Vanlige mønstre bør grupperes ved å bruke @content.
• Generering av komplekse verktøy bør kun utføres i byggetiden.

Tips for enklere feilsøking

Når man bruker mixins, er det også viktig å utarbeide metoder for å forbedre feilsøking og vedlikeholdbarhet. Ved å bruke tydelige variabelnavn og legge til kommentarer i mixins, blir det enklere å forstå når koden gjennomgås senere. Hvis funksjonaliteten blir kompleks, vil det også gjøre det lettere å teste og forbedre vedlikeholdbarheten ved å dele opp mixinen i mindre enheter.

I tillegg gjør aktivering av kildekart det mulig å enkelt spore hvilken mixin som genererte hvilken CSS, noe som gjør det lettere å isolere problemer.

Nedenfor er et eksempel på en lettfattelig mixin med dokumentasjonskommentarer.

1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6  outline: none;
7  box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}

• Å ha organiserte dokumentasjonskommentarer på denne måten gjør det lettere å dele og forstå informasjonen i teamet.
• Siden SASS-dokumentasjonskommentarer kan hentes ut automatisk med kompatible verktøy, er de også nyttige for å lage dokumenter som stilguider.

Sammendrag

Siden mixins lar deg samle ofte brukte stiler for gjenbruk, bidrar de til å redusere kode-duplisering og forbedre vedlikeholdbarhet. Når flere selektorer deler samme regler, bør du vurdere å bruke ikke bare mixins, men også @extend (placeholders). Videre, selv om @content muliggjør fleksibel separasjon av layout-wrappers og innhold, kan overdreven bruk av @include føre til oppblåst generert CSS, så vær oppmerksom. Det er viktig å utnytte argumenter, standardverdier og variadiske argumenter for å lage mixins som er generelle og enkle å utvide.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video