SASS-moduler

Denne artikel forklarer SASS-moduler.

Vi forklarer, hvordan man modulariserer SASS ved hjælp af @use og @forward, og hvordan man genbruger variable, mixins, funktioner, temaindstillinger og offentlige API'er.

YouTube Video

SASS-moduler

SASS’ modul-system hjælper med at afgrænse stilarter tydeligt og giver et design, der er nemt at genbruge og vedligeholde.

Grundlæggende begreber for moduler

SASS-moduler løser problemer med global navnerumsforurening og uklare afhængigheder, som var til stede med den gamle @import. Hver fil indlæses som et modul med sit eget navnerum, og kun de elementer, der eksplicit eksporteres, er tilgængelige fra andre filer.

Eksempel på filstruktur

Her er først et eksempel på en realistisk projektstruktur. Herunder ses et eksempel på et lille designsystem.

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• Denne struktur gør det nemt at modulopdele, teste og udskifte dele.
• Partial-filer har en understregning i begyndelsen af filnavnet.

Grundlæggende om @use

@use indlæser et modul og giver et navnerum. Dette forhindrer navnekollisioner og gør kilde-modulet tydeligt.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• Denne fil er simpel og definerer kun variabler. Variabler udgivet fra et modul kan tilgås direkte ved hjælp af @use.

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• Her refereres variables-modulet med variables.-navnerummet. Denne tilgang gør oprindelsen af hvert element tydelig.

Forkortelse eller alias af navnerum

Brug af as giver dig mulighed for at forkorte navnerummet.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• Dette er et eksempel på at importere variables ved brug af det kortere alias vars. Vælg navne baseret på, om du prioriterer læsbarhed eller nem indtastning.

Mixin-definition

Mixins og funktioner kan også defineres og bruges i moduler. At holde kommentarer i overensstemmelse med projektets konventioner hjælper med klarheden.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• Denne fil definerer en mixin til containere. Den tager argumenter og giver standardværdier.

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• Dette er et eksempel på at bruge en mixin med @include.

Definering af funktioner

Funktioner bruges til at returnere værdier og kan defineres og genbruges inden for moduler. Ved at kapsle beregninger til designværdier ind i funktioner bliver stilarter mere stabile og lettere at vedligeholde.

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• Denne fil definerer en funktion, der konverterer pixelværdier til rem. En standard basisværdi er også angivet.

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• Her er et eksempel på at kalde en funktion via @use og anvende resultatet på en stil.

Moduleksport og @forward (API-design)

Når du vil gøre flere interne filer tilgængelige eksternt, kan du bruge @forward til at skabe en 'offentlig API'.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• Flere interne filer kan samles i et enkelt entry point, der dermed udgør den offentlige API. Dette gør det muligt for brugere at tilgå alle nødvendige funktioner ved kun at importere ét entry point.

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• Indholdet af variables og mixins tilgås samlet via index. @forward gør index til det offentlige lag.

Styring af API'en med @forward-mulighederne show/hide

Hvis du kun vil eksponere specifikke variabler, skal du bruge show- eller hide-mulighederne.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• Ved at tilføje !default kan du udgive en værdi, der kan overskrives.

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• Ved at bruge show sammen med @forward kan du begrænse den eksponerede API til kun de nødvendige elementer. Variabler og funktioner anvendt internt vil ikke kunne ses udefra.

Gør moduler konfigurerbare (med with)

Hvis du bruger !default i modulet, kan værdier overskrives med with ved import.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• Et modul med standardværdier defineret med !default kan acceptere konfigurationer via with.

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• with i @use gør det muligt at tilsidesætte standardvariabler i et modul under import. Dette er nyttigt til themeswitching.
• Bemærk, at with kun virker under import, og du kan ikke ændre værdierne senere.

Praktisk eksempel: Knapkomponent (fuldstændigt eksempel)

Lad os prøve at designe knapstilarter med moduler. Først opdeles variabler og mixins i deres egne moduler.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• Standardvariabler for knapper defineres her. Ved at bruge !default kan brugere overskrive disse værdier.

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• Basis-mixinen for knapper defineres her. De er adskilt for nem genanvendelse.

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• Knapstilarter oprettes ved brug af navnerumsreferencer med @use. En variant defineres som .button--large.

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• Ved at importere button-modulet kan du straks bruge knapstilarterne.

Themeskift (brug af flere theme-filer)

Themeskift kan håndteres via konfiguration med with eller ved at oprette separate moduler og ændre hvilket, der bruges med @use.

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• Definer brandfarver og andre indstillinger i flere theme-filer, og skift dem under bygning eller import.

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• Vælg temaet enten ved at bruge with eller ved at importere f.eks. @use 'themes/light' under build-processen.

Privat og offentligt (præfiks _ og !default)

I SASS markeres en fil som en partial ved at tilføje en understregning i begyndelsen af filnavnet. Dog bør du ved styring af modulers eksport-synlighed bruge show og hide med @forward for at styre, hvad der eksporteres.

Du kan bruge @forward til at organisere den offentlige API og skjule interne implementeringer udefra.

Bedste praksis til brug i virkeligheden

Nedenfor er nogle grundlæggende begreber, som er nyttige, når du bruger SASS i praksis. Alle disse retningslinjer hjælper med at mindske forvirring under udvikling og holder din kode organiseret.

• Hvis variabler kan forventes at ændre sig som del af et tema, tilføj da !default. Dette gør det lettere for brugere at overskrive værdier.
• Moduler bør opdeles efter ansvar og fokusere på ét formål. Det bliver lettere at administrere ved at adskille variable, mixins og komponenter.
• Styr offentligt indhold med @forward og brug show eller hide efter behov. At definere omfanget af det offentlige fører til et mere sikkert design.
• Brug navnerum for at gøre det tydeligt, hvilket modul hver funktion hører til. Dette forhindrer forveksling med anden kode.
• Husk at with kun virker på tidspunktet for @use. Da du ikke kan ændre dem senere, skal du sætte konfigurationer ved import.
• Brug en understregning i starten af filnavne for at gøre dem til partials, så de ikke kompileres individuelt. Det gør det lettere at kombinere filer i en større struktur.
• At inkludere brugseksempler i index-modulet hjælper med test og dokumentation. Det bliver lettere for brugerne at forstå adfærden.

Hvis du holder disse ting for øje, bliver det nemmere at styre store projekter og fastholde læsbar kode som et team.

Sammendrag

SASS’ modul-system organiserer stilekode gennem navnerum, offentlige API’er og forenklet konfiguration. Dygtig brug af @use og @forward gør teamudvikling, themeswitching og biblioteksdesign meget nemmere.

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