Mixins i SASS

Denne artikel forklarer mixins i SASS.

Vi forklarer mixins i SASS med praktiske eksempler.

YouTube Video

Mixins i SASS

Oversigt – Hvad er et Mixin?

Mixins er en mekanisme, der gør det muligt at definere ofte anvendte sæt af stilegenskaber som genanvendelige funktioner, som du kan kalde, hvor du har brug for det. De er meget nyttige til at holde dine CSS-klasser og flere egenskaber DRY (Don't Repeat Yourself).

Eksempel: Det simpleste mixin

Nedenfor er et simpelt eksempel på et mixin, der genbruger border-radius og box-shadow sammen. Ved at kalde dette mixin kan du anvende det samme udseende på flere elementer.

 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 dette mixin behøver du ikke længere gentage stilarter direkte.
• Det kræver kun én linje at kalde: @include card-style;.

Mixins med argumenter (parametre)

Mixins kan modtage argumenter, ligesom funktioner. Dette gør det muligt at ændre udseendet med den samme logik. Dernæst er et eksempel, hvor farve tages 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 at angive en standardværdi kan du styre adfærden, når et argument udelades.
• I dette eksempel bruges standardradiusen, og kun baggrundsfarven overskrives.

Tilfælde hvor variadiske argumenter (...) bruges

Når du vil modtage flere værdier, kan du bruge variadiske argumenter ($args...). Dette er nyttigt til at generere hjælpeklasser eller videregive fallback-lister.

Det er nyttigt, når du skal sende flere skrifttypetyper eller flere skyggerværdier.

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}

• I kaldet kan du sende flere skygger adskilt med komma.
• På denne måde kan du bruge det samme mixin til både simple og komplekse skygger.

Mixins med @content — Modtage et blok

Med @content kan et mixin modtage en blok af stilarter fra opkalderen. Dette gør det muligt for mixin'et at give en fælles wrapper, mens opkalderen specificerer de indre detaljer.

 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}

• I kaldet kan du tilføje en blok til @include for at indsætte stilarter indeni.
• Dette mønster er nyttigt for layout-wrappers som grids, kort og formularer.

Avancerede mixins med betingelser og løkker

Kontrolstrukturer som @if og @for kan bruges i mixins. Du kan bruge disse til at automatisere oprettelse af hjælpemidler og gruppere responsive indstillinger.

Nedenfor er et eksempel på automatisk generering af hjælpeklassebredder.

 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 blot at videregive et kort over de brøker, du ønsker at generere på kaldesiden, kan du automatisk generere de tilsvarende hjælpeklasser på én gang.
• Ved at bruge denne tilgang opnår du fordelen ved at reducere manuelle style-definitioner og samtidig bevare konsistensen i dit design.

Mixins vs Placeholders (%placeholder)

Mens mixins direkte indsætter et sæt egenskaber, bruges placeholders sammen med @extend, når du arver stilarter. Mixins kan i nogle tilfælde generere dobbelt CSS, men @extend kan i visse situationer producere mere kompakt CSS.

Ved at forstå formålene og forskellene mellem de CSS, de forskellige metoder genererer, kan du vælge den mest optimale tilgang.

 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 @extend en placeholder, kan flere selektorer samles i én regel, hvilket resulterer i mere kompakt CSS.
• På den anden side giver mixins fleksibilitet og hjælper med at undgå utilsigtet sammenfletning af selektorer, da de indsætter egenskaber direkte, hvor det er nødvendigt.

Almindelige praktiske mønstre (responsive, vendor-præfikser osv.)

I praksis er det nyttigt at placere almindelig behandling som vendor-præfikser og responsive funktioner i mixins. Nedenfor er et eksempel, der kombinerer transform og præfiks-egenskaber. Du kan centralisere kode for browserkompatibilitet og gøre vedligeholdelse lettere.

 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}

• Brugen er enkel, og du kan bruge det hvor som helst, for eksempel @include transform(rotate(10deg));.
• Selv hvis præfikser bliver unødvendige i fremtiden, bliver vedligeholdelsen lettere, fordi en opdatering af mixinet vil afspejle ændringen i hele din kodebase.

Praktisk eksempel: Kort og knapper kombineret

Nedenfor er et eksempel, hvor knapstilarterne brugt i kortet er forenet med en mixin, hvilket gør det muligt at skifte efter temafarven.

Dette organiserer det ofte brugte 'kort + knap'-mønster ved hjælp af 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 at bruge disse mixins kan du skrive komponenter kortfattet.

Vær opmærksom på ydeevne og genereret CSS

Da mixins indsætter egenskaber hver gang de kaldes, kan omfattende brug af @include for den samme regel gøre din endelige CSS større. Du kan optimere ved at kombinere dem med placeholders og komponentdesign, når det er nødvendigt.

Desuden er følgende tiltag også effektive.

• Stilarter, der bruges ofte, bør laves som klasser til genbrug.
• Fælles mønstre bør grupperes ved hjælp af @content.
• Oprettelsen af komplekse utilities bør kun udføres under build-processen.

Tips til nemmere fejlfinding

Når man bruger mixins, er det også vigtigt at udvikle metoder til at forbedre fejlfinding og vedligeholdelse. Ved at bruge klare variabelnavne og tilføje kommentarer i mixins, bliver det lettere at forstå, når du senere gennemgår koden. Hvis funktionaliteten bliver kompleks, vil det også gøre testning lettere og forbedre vedligeholdelsen, hvis man opdeler mixinen i mindre enheder.

Derudover gør aktivering af source maps det let at spore, hvilken mixin der genererede hvilken CSS, hvilket gør det nemmere at isolere problemer.

Nedenfor er et eksempel på en letforståelig mixin med dokumentationskommentarer.

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}

• At have organiserede dokumentationskommentarer som disse gør det lettere at dele og forstå inden for teamet.
• Da SASS-dokumentationskommentarer kan udtrækkes automatisk med kompatible værktøjer, er de også nyttige til at generere dokumenter som style guides.

Sammendrag

Da mixins gør det muligt at samle ofte brugte stilarter til genbrug, hjælper de med at reducere kodedupliker og forbedre vedligeholdelse. Når flere selectorer deler de samme regler, bør du også overveje at bruge ikke kun mixins, men også @extend (placeholders). Desuden, selvom @content giver en fleksibel adskillelse af layout-wrappers og indhold, kan overdreven brug af @include føre til oppustet genereret CSS, så forsigtighed anbefales. Det er vigtigt at udnytte argumenter, standardværdier og variadiske argumenter fuldt ud for at designe mixins, der er generiske og lette at udvide.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video