SASS-moduler

Den här artikeln förklarar SASS-moduler.

Vi förklarar hur man modulariserar SASS med hjälp av @use och @forward, samt hur man återanvänder variabler, mixins, funktioner, temainställningar och publika API:er.

YouTube Video

SASS-moduler

SASS modulssystem hjälper till att tydligt avgränsa stilar och ger en design som är lätt att återanvända och underhålla.

Grundläggande koncept för moduler

SASS-moduler löser problem med global namespace-förorening och otydliga beroenden som fanns med den gamla @import. Varje fil laddas som en modul med egen namnrymd, och endast de objekt som exporteras explicit är tillgängliga från andra filer.

Exempel på filstruktur

Först, här är ett exempel på en realistisk projektstruktur. Nedan är ett exempel på ett litet 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

• Den här strukturen gör modularisering, testning och utbyte av delar enkelt.
• Delade filer har ett understreck i början av filnamnet.

Grunderna i @use

@use laddar en modul och tilldelar en namnrymd. Detta förhindrar namnkonflikter och klargör källmodulen.

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

• Den här filen är enkel och definierar endast variabler. Variabler som delas från en modul kan refereras direkt med @use.

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

• Här refereras modulen variables med namnrymden variables.. Detta tillvägagångssätt gör ursprunget för varje objekt tydligt.

Förkorta eller ge alias till namnrymder

Genom att använda as kan du förkorta namnrymden.

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

• Här är ett exempel på att importera variables med det kortare aliaset vars. Välj namn beroende på om du prioriterar läsbarhet eller hur lätt det är att skriva.

Mixin-definition

Mixins och funktioner kan också definieras och användas inom moduler. Det underlättar tydligheten att hålla kommentarer konsekventa med projektets konventioner.

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}

• Denna fil definierar en mixin för containrar. Den accepterar argument och tillhandahåller standardvärden.

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

• Detta är ett exempel på att använda en mixin med @include.

Definiera funktioner

Funktioner används för att returnera värden och kan definieras samt återanvändas inom moduler. Genom att kapsla in beräkningar för designvärden i funktioner blir stilar mer stabila och lättare att underhålla.

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}

• Den här filen definierar en funktion som omvandlar pixelvärden till rem. Ett standardbasvärde specificeras också.

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

• Här är ett exempel på att anropa en funktion via @use och tillämpa resultatet på en stil.

Modul-export och @forward (API-design)

När du vill exponera flera interna filer externt kan du använda @forward för att skapa ett 'publikt API'.

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

• Flera interna filer kan grupperas som en enda ingångspunkt, som då fungerar som det publika API:t. Detta låter användare få tillgång till alla nödvändiga funktioner genom att bara importera en ingångspunkt.

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

• Innehållet i variables och mixins nås tillsammans via index. @forward gör index till det publika lagret.

Styr API:t med @forward-alternativen show / hide

Om du bara vill exponera vissa variabler, använd alternativen show eller hide.

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

• Genom att lägga till !default kan du publicera ett värde som kan skrivas över.

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

• Genom att använda show med @forward kan du begränsa det exponerade API:t till bara de nödvändiga elementen. Interna variabler och funktioner kommer inte att vara synliga utifrån.

Gör moduler konfigurerbara (med with)

Om du använder !default i modulen kan värden skrivas över med with vid 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}

• En modul med standardvärden definierade med !default kan anpassas 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 att standardvariabler i en modul kan skrivas över vid import. Detta är användbart för att byta tema.
• Observera att with endast gäller vid import och du kan inte ändra dessa värden senare.

Praktiskt exempel: knapplikomponent (fullständigt exempel)

Låt oss prova att skapa knappstilar med hjälp av moduler. Separera först variabler och mixins i egna 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 för knappar definieras här. Genom att använda !default kan användare skriva över dessa värden.

 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}

• Bas-mixinen för knappar definieras här. De är separerade för att underlätta återanvändning.

 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}

• Knappstilar skapas med namnrymdsreferenser med @use. En variant definieras som .button--large.

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

• Genom att importera button-modulen kan du direkt använda knappstilarna.

Byta teman (med flera temafiler)

Temabyte kan göras genom att konfigurera via with eller genom att skapa separata moduler och ändra vilken som används med @use.

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

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

• Definiera profilfärger och andra inställningar i flera temafiler och byt dem vid bygg eller import.

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

• Välj tema antingen genom att använda with eller genom att importera, till exempel, @use 'themes/light' under byggprocessen.

Privat och Publikt (Prefix _ och !default)

I SASS markeras en fil som en partial genom att lägga till ett understreck i början av filnamnet. Men när du hanterar modulernas export-synlighet, använd show och hide med @forward för att kontrollera vad som exporteras.

Du kan använda @forward för att organisera det publika API:t och dölja interna implementationer.

Bästa praxis för faktisk användning

Nedan följer några grundläggande begrepp som är användbara när man använder SASS i praktiska situationer. Alla dessa riktlinjer hjälper till att minska förvirring under utveckling och hålla koden organiserad.

• Om variabler sannolikt kommer ändras som en del av ett tema, lägg till !default. Detta gör det lättare för användare att åsidosätta värden.
• Moduler bör delas upp efter ansvar och vara fokuserade på ett enda syfte. Det blir lättare att hantera genom att separera variabler, mixins och komponenter.
• Hantera publikt innehåll med @forward och använd show eller hide efter behov. Att definiera vad som är publikt ger en säkrare design.
• Använd namnrymder för att tydliggöra vilken modul varje funktion tillhör. Detta förhindrar förväxling med annan kod.
• Kom ihåg att with bara fungerar vid själva @use-tillfället. Eftersom du inte kan ändra dem senare, gör konfigurationer vid import.
• Använd ett understreck i början av filnamn för att göra dem till partials – då kompileras de inte enskilt. Detta gör det enklare att kombinera filer i en större struktur.
• Att inkludera användningsexempel i index-modulen underlättar testning och dokumentation. Det blir lättare för användare att förstå hur allt fungerar.

Om du håller dessa punkter i minnet blir det enklare att hantera stora projekt och behålla läsbar kod i team.

Sammanfattning

SASS modulssystem organiserar stilkod genom namespaces, publika API:er och förenklad konfiguration. Om du använder @use och @forward på ett skickligt sätt blir teamutveckling, temabyte och biblioteksdesign mycket enklare.

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