Mixins i SASS

Den här artikeln förklarar mixins i SASS.

Vi kommer att förklara mixins i SASS med praktiska exempel.

YouTube Video

Mixins i SASS

Översikt – Vad är en Mixin?

Mixins är en mekanism som låter dig definiera ofta använda uppsättningar av stilegenskaper som återanvändbara funktioner, vilka du kan använda där de behövs. De är mycket användbara för att hålla dina CSS-klasser och flera egenskaper DRY (Don't Repeat Yourself).

Exempel: Den enklaste mixin

Nedan är ett enkelt exempel på en mixin som återanvänder border-radius och box-shadow tillsammans. Genom att anropa denna mixin kan du tillämpa samma utseende på flera element.

 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 denna mixin behöver du inte längre upprepa stilar direkt.
• Att anropa den kräver bara en rad: @include card-style;.

Mixins med argument (parametrar)

Mixins kan ta emot argument, precis som funktioner. Detta gör att du kan ändra utseendet med samma logik. Härnäst är ett exempel där färg tas som ett 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}

• Genom att ange ett standardvärde kan du styra beteendet när ett argument utelämnas.
• I detta exempel används standardradius och endast bakgrundsfärgen överskrids.

Fall där variabla argument (...) används

När du vill acceptera flera värden kan du använda variabla argument ($args...). Detta är användbart för att generera verktygsklasser eller skicka fallback-listor.

Det är hjälpsamt när du behöver ange flera teckensnittsfamiljer eller flera skuggvärden.

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å anropssidan kan du ange flera skuggor avskilda med kommatecken.
• På så sätt kan du använda samma mixin för både enkla och komplexa skuggor.

Mixins med @content — Tar emot ett block

Med @content kan en mixin ta emot ett block av stilar från den som anropar. Detta gör att mixinen kan erbjuda en gemensam wrapper, medan anroparen specificerar de inre detaljerna.

 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å anropssidan kan du lägga till ett block till @include för att infoga stilar inuti.
• Detta mönster är användbart för layout-wrappers såsom grid, kort och formulär.

Avancerade mixins med villkor och loopar

Styrstrukturer som @if och @for kan användas inuti mixins. Du kan använda dessa för att automatisera generering av verktyg och gruppera responsiva inställningar.

Nedan är ett exempel på automatisk generering av breddklasser för verktyg.

 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);

• Genom att helt enkelt skicka en karta över de fraktioner du vill generera på anropssidan, kan du automatiskt skapa motsvarande hjälparklasser på en gång.
• Att använda detta tillvägagångssätt har fördelen att det minskar manuella stildefinitioner samtidigt som det upprätthåller enhetlighet i din design.

Mixins vs platshållare (%placeholder)

Medan mixins infogar en uppsättning egenskaper direkt, används platshållare med @extend när du ärver stilar. Mixins kan i vissa fall generera duplicerad CSS, men @extend kan producera mer kompakt CSS i vissa situationer.

Genom att förstå syftet och skillnaderna i den CSS som genereras av varje metod, kommer du att kunna välja det mest optimala tillvägagångssättet.

 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 platshållare kan flera selektorer konsolideras till en enda regel, vilket resulterar i mer kompakt CSS.
• Å andra sidan, eftersom mixins infogar egenskaper direkt där de behövs, ger de flexibilitet och hjälper till att undvika oavsiktlig sammanslagning av selektorer.

Vanliga praktiska mönster (responsivitet, leverantörsprefix, etc.)

I praktiken är det användbart att lägga vanlig behandling som leverantörsprefix och responsiva funktioner i mixins. Nedan är ett exempel som kombinerar transform och prefix-egenskaper. Du kan centralisera kod för webbläsarkompatibilitet, vilket gör underhåll enklare.

 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}

• Användningen är enkel och du kan använda den var som helst, till exempel @include transform(rotate(10deg));.
• Även om prefix kan bli onödiga i framtiden, blir underhållet enklare eftersom en uppdatering av mixinen återspeglar förändringen i hela din kodbas.

Praktiskt exempel: Kort och knappar kombinerade

Nedan är ett exempel där knappstilarna som används i kortet enhetliggörs med en mixin, vilket gör det möjligt att byta dem beroende på temafärgen.

Detta organiserar det vanliga 'kort + knapp'-mönstret med hjälp 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}

• Genom att använda dessa mixins kan du skriva komponenter kortfattat.

Var uppmärksam på prestanda och genererad CSS

Eftersom mixins infogar egenskaper varje gång de anropas kan omfattande användning av @include för samma regel göra din slutliga CSS större. Du kan optimera genom att kombinera dem med platshållare och komponentdesign vid behov.

Dessutom är följande åtgärder också effektiva.

• Stilar som används frekvent bör göras till klasser för återanvändning.
• Vanliga mönster bör grupperas med hjälp av @content.
• Generering av komplexa verktyg bör endast utföras vid byggtillfället.

Tips för enklare felsökning

När du använder mixins är det också viktigt att hitta metoder för att förbättra felsökning och underhållbarhet. Genom att använda tydliga variabelnamn och lägga till kommentarer i mixins blir det lättare att förstå när du granskar koden senare. Dessutom, om funktionaliteten blir komplex, gör en uppdelning av mixin i mindre enheter testningen enklare och förbättrar underhållbarheten.

Dessutom gör aktivering av source maps att du enkelt kan spåra vilken mixin som har genererat vilken CSS, vilket underlättar felsökning.

Nedan är ett exempel på en lättförstå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}

• Att ha organiserade dokumentationskommentarer som dessa gör det enklare att dela och förstå inom teamet.
• Eftersom SASS-dokumentationskommentarer kan extraheras automatiskt med kompatibla verktyg, är de också användbara för att skapa dokument som till exempel stilguider.

Sammanfattning

Eftersom mixins gör att du kan samla ofta använda stilar för återanvändning, hjälper de att minska kodduplicering och förbättra underhållbarhet. Dessutom, när flera selektorer har samma regler, överväg att använda inte bara mixins utan även @extend (platshållare). Vidare möjliggör @content flexibel uppdelning av layout-wrappers och innehåll, men överanvändning av @include kan leda till uppsvälld genererad CSS, så var försiktig. Det är viktigt att utnyttja argument, standardvärden och variabla argument fullt ut för att utforma mixins som är generiska och lätta att utöka.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video