SASS-moduler

Denne artikkelen forklarer SASS-moduler.

Vi forklarer hvordan du kan modulere SASS ved å bruke @use og @forward, og hvordan du kan gjenbruke variabler, mixins, funksjoner, temainnstillinger og offentlige API-er.

YouTube Video

SASS-moduler

SASS sitt modulsystem hjelper med å definere tydelige omfang for stiler og gir et design som er lett å gjenbruke og vedlikeholde.

Grunnleggende konsepter for moduler

SASS-moduler løser problemer med global navneområdeforurensning og uklare avhengigheter som fantes med den gamle @import. Hver fil lastes som en modul med sitt eget navneområde, og kun elementene som eksplisitt eksporteres er tilgjengelige fra andre filer.

Eksempel på filstruktur

Først, her er et eksempel på en realistisk prosjektstruktur. Nedenfor er et eksempel på et lite 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 strukturen gjør det enkelt å modulere, teste og bytte ut deler.
• Partielle filer har en understrek (underscore) først i filnavnet.

Grunnleggende om @use

@use laster en modul og gir et navneområde. Dette forhindrer navnekollisjoner og gjør det tydelig hvor modulen kommer fra.

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

• Denne filen er enkel og definerer kun variabler. Variabler publisert fra en modul kan refereres direkte med @use.

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

• Her refereres variables-modulen med navneområdet variables.. Denne tilnærmingen gjør opprinnelsen til hvert enkelt element tydelig.

Forkorte eller gi alias til navneområder

as lar deg forkorte navneområdet.

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

• Dette er et eksempel på å importere variables med det kortere aliaset vars. Velg navn basert på om du prioriterer lesbarhet eller hvor lett de er å skrive.

Definisjon av mixin

Miksiner og funksjoner kan også defineres og brukes innenfor moduler. Å holde kommentarer i samsvar med prosjektets konvensjoner bidrar til tydelighet.

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 filen definerer en miksin for containere. Den tar argumenter og gir standardverdier.

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

• Dette er et eksempel på å bruke en miksin med @include.

Definere funksjoner

Funksjoner brukes for å returnere verdier, og kan defineres og gjenbrukes innenfor moduler. Ved å kapsle inn beregninger for designverdier i funksjoner, blir stiler mer stabile og lettere å vedlikeholde.

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 filen definerer en funksjon som konverterer pikselverdier til rem. En standard basisverdi er også spesifisert.

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

• Her er et eksempel på å kalle en funksjon via @use og bruke resultatet i en stil.

Modul-eksport og @forward (API-design)

Når du vil eksponere flere interne filer eksternt, kan du bruke @forward for å lage et 'offentlig API'.

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

• Flere interne filer kan grupperes som ett enkelt inngangspunkt, som så gir det offentlige API-et. Dette lar brukere få tilgang til alle nødvendige funksjoner ved kun å importere ett inngangspunkt.

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

• Innholdet i variables og mixins nås samlet gjennom index. @forward gjør index til det offentlige laget.

Kontrollere API-et med @forward sine show / hide-alternativer

Hvis du kun vil eksponere bestemte variabler, bruk show- eller hide-alternativet.

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

• Ved å legge til !default kan du publisere en verdi som kan overskrives.

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

• Ved å bruke show med @forward kan du begrense det eksponerte API-et til kun nødvendige elementer. Variabler og funksjoner brukt internt vil ikke være synlige utenfra.

Gjøre moduler konfigurerbare (med with)

Hvis du bruker !default i modulen, kan verdiene overskrives med with på import-siden.

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 standardverdier definert med !default kan motta konfigurasjoner 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 lar deg overstyre standardvariabler i en modul ved import. Dette er nyttig for bytte av tema.
• Merk at with kun har effekt ved import, og du kan ikke endre verdiene senere.

Praktisk eksempel: Knappekomponent (Fullstendig eksempel)

La oss prøve å designe knappestiler ved å bruke moduler. Først, skill ut variabler og miksiner i 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 er definert her. Ved å bruke !default kan brukerne overstyre disse verdiene.

 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}

• Grunnmiksinen for knapper er definert her. De er delt opp for enkel gjenbruk.

 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}

• Knappestiler opprettes ved å bruke navneområdereferanser med @use. En variant er definert som .button--large.

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

• Ved å importere button-modulen kan du bruke knappestilene umiddelbart.

Bytte av tema (Bruke flere temafiler)

Tema kan byttes ved å konfigurere med with eller ved å lage egne moduler og endre hvilken som brukes med @use.

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

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

• Definer merkevarefarger og andre innstillinger i flere temafiler og bytt dem ved bygging eller import.

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

• Velg tema enten med with eller ved å importere f.eks. @use 'themes/light' under byggeprosessen.

Privat og offentlig (Prefiks _ og !default)

I SASS markerer man en fil som en partial ved å legge til en understrek i begynnelsen av filnavnet. Når du styrer eksport-synlighet for moduler, bruk show og hide med @forward for å kontrollere hva som eksporteres.

Du kan bruke @forward for å organisere det offentlige API-et og skjule interne implementasjoner fra utsiden.

Beste praksis for bruk i virkeligheten

Nedenfor er noen grunnleggende konsepter som er nyttige når du bruker SASS i praksis. Alle disse retningslinjene vil redusere forvirring under utvikling og holde koden organisert.

• Hvis variabler sannsynligvis vil endres som en del av et tema, legg til !default. Dette gjør det enklere for brukere å overstyre verdier.
• Moduler bør deles etter ansvar og være fokusert på ett formål. Det blir lettere å administrere ved å skille variabler, mixins og komponenter.
• Administrer offentlige innhold med @forward og bruk show eller hide etter behov. Å definere rammen for hva som er offentlig fører til sikrere design.
• Bruk navneområder for å gjøre det tydelig hvilken modul hver funksjon tilhører. Dette forhindrer forvirring med annen kode.
• Husk at with kun fungerer ved bruk av @use. Siden du ikke kan endre dem senere, må konfigurasjonene settes ved import.
• Bruk en understrek først i filnavnet for å gjøre dem partielle, slik at de ikke kompileres individuelt. Dette gjør det enklere å kombinere filer til en større struktur.
• Å inkludere brukseksempler i index-modulen hjelper med testing og dokumentasjon. Det blir enklere for brukerne å forstå oppførselen.

Å ha disse punktene i bakhodet hjelper deg å håndtere store prosjekter og opprettholde lesbar kode som et team.

Sammendrag

SASS-modulsystemet organiserer stilkoden gjennom navnerom, offentlige API-er og forenklet konfigurasjon. Ved å bruke @use og @forward på en dyktig måte blir teamutvikling, temabytte og biblioteksdesign mye enklere.

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