Arv i SASS

Denne artikel forklarer arv i SASS.

Vi vil forklare arv i SASS med praktiske eksempler.

YouTube Video

Arv i SASS

Arv i SASS (@extend) er en mekanisme, der gør det muligt at anvende stilarter fra én selektor til en anden uden duplikering. Da de samme stilarter 'kombineres' og outputtes for flere elementer i markup'en, er det mindre sandsynligt, at den resulterende CSS bliver redundant; dog kan forkert brug føre til utilsigtede sammenfletninger af selektorer.

Grundlæggende: Sådan bruger du @extend

Nedenfor er et grundlæggende eksempel, hvor .btn--primary arver stilarterne fra .btn. @extend er en direktiv, der udvider målselektoren.

 1// Base button styles
 2.btn {
 3  padding: 0.5rem 1rem;
 4  border-radius: 4px;
 5  border: 1px solid #ccc;
 6  background: white;
 7  color: #333;
 8}
 9
10/* Primary button extends the base .btn */
11.btn--primary {
12  @extend .btn;
13  background: #007bff;
14  color: white;
15}

• Ved brug af @extend arver .btn--primary grundstilarterne fra .btn og overskriver kun de nødvendige dele.

Genereret CSS

 1.btn, .btn--primary {
 2  padding: 0.5rem 1rem;
 3  border-radius: 4px;
 4  border: 1px solid #ccc;
 5  background: white;
 6  color: #333;
 7}
 8
 9.btn--primary {
10  background: #007bff;
11  color: white;
12}

Best Practice: Brug af placeholders (%placeholder)

Pladsholder-selektorer (%name) er selektorer, der ikke bliver skrevet ud i CSS. De bruges bredt, især når du vil dele fælles stilarter sikkert udelukkende til arv på tværs af flere komponenter.

 1// %placeholder will not be output directly
 2%card-base {
 3  padding: 1rem;
 4  border-radius: 6px;
 5  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 6  background: #fff;
 7}
 8
 9/* Components extend the placeholder */
10.card {
11  @extend %card-base;
12  border: 1px solid #eee;
13}
14
15.panel {
16  @extend %card-base;
17  border: 1px solid #ddd;
18}

• .card og .panel arver begge fra %card-base, hvilket giver dem mulighed for at dele fælles stilarter, mens forskelle kan tilføjes efter behov.

Genereret CSS

 1.card, .panel {
 2  padding: 1rem;
 3  border-radius: 6px;
 4  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 5  background: #fff;
 6}
 7
 8.card {
 9  border: 1px solid #eee;
10}
11
12.panel {
13  border: 1px solid #ddd;
14}

Flere arv (flere @extend)

Du kan arve flere placeholders eller klasser samtidig. Selvom genbrugeligheden af stilarter forbedres, er det vigtigt at holde styr på, hvilke regler der kombineres med hvilke selektorer.

 1%btn-base {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  border-radius: 3px;
 5}
 6
 7%btn-large {
 8  padding: 0.75rem 1.5rem;
 9  font-size: 1.125rem;
10}
11
12/* Composite button that extends both placeholders */
13.btn--lg {
14  @extend %btn-base;
15  @extend %btn-large;
16  background: #222;
17  color: #fff;
18}

• Dette er et eksempel, hvor en knap arver to placeholders, en for 'base' og en for 'størrelse'.
• .btn--lg arver både %btn-base og %btn-large og kombinerer det grundlæggende layout med større størrelse.

Genereret CSS

1.btn--lg {
2  display: inline-block;
3  /* %btn-large overrides the padding from %btn-base */
4  padding: 0.75rem 1.5rem;
5  border-radius: 3px;
6  font-size: 1.125rem;
7  background: #222;
8  color: #fff;
9}

@extend opførsel (sammenfletningsmekanisme) og advarsler om 'selektor-eksplosion'

@extend outputter alle matchende selektorer samlet, hvilket nogle gange kan resultere i utilsigtede kombinationer af selektorer.

Følgende eksempel viser, hvordan output kan vokse, når den samme base-klasse udvides flere steder.

 1/* Many components extend .utility */
 2/* A generic utility class */
 3.utility {
 4  margin-bottom: 1rem;
 5}
 6
 7/* Nested selectors that extend .utility */
 8.header {
 9  @extend .utility;
10  .title {
11    font-weight: bold;
12  }
13}
14
15.footer {
16  @extend .utility;
17  .note {
18    color: #888;
19  }
20}
21
22.article {
23  @extend .utility;
24  .content {
25    line-height: 1.6;
26  }
27}
28
29.sidebar {
30  @extend .utility;
31  .section {
32    padding: 1rem;
33  }
34}

• Når flere komponenter arver .utility, flettes selektorerne til én, og i større projekter kan dette føre til oppustet CSS.

Genereret CSS

 1.utility,
 2.header,
 3.footer,
 4.article,
 5.sidebar {
 6  margin-bottom: 1rem;
 7}
 8
 9.header .title {
10  font-weight: bold;
11}
12
13.footer .note {
14  color: #888;
15}
16
17.article .content {
18  line-height: 1.6;
19}
20
21.sidebar .section {
22  padding: 1rem;
23}

@extend og .class vs. element-selektorer (tags) — prioritet og bivirkninger

@extend kan anvendes ikke kun på klasser, men også på element-selektorer. Dog forøger udvidelse af elementer rækkevidden, hvilket øger risikoen for, at regler anvendes utilsigtet andre steder.

Nedenfor er et eksempel på at udvide en element-selektor og den effekt, det kan have.

 1/* Extending an element selector (not recommended) */
 2h1 {
 3  font-size: 2rem;
 4  margin-bottom: 0.5rem;
 5}
 6
 7/* If you extend h1, the resulting selector will include your class with h1 */
 8.title {
 9  @extend h1;
10  color: #333;
11}
12
13/* Output becomes:
14h1, .title { font-size: 2rem; margin-bottom: 0.5rem; }
15*/

• I dette eksempel gør arv af element-selektor h1, at .title bliver flettet med de samme stilarter som h1.
• Selvom det kan virke bekvemt i små projekter, kan regler for h1 uventet kombineres med .title, når projektet vokser, hvilket gør stilarterne mere komplekse og reducerer vedligeholdelsen. Derfor gør det stilarter nemmere at vedligeholde, hvis de primært designes omkring klasser og pladsholdere.

Genereret CSS

1h1,
2.title {
3  font-size: 2rem;
4  margin-bottom: 0.5rem;
5}
6
7.title {
8  color: #333;
9}

Anvendelser for @extend og !optional

Hvis du angiver !optional med @extend, kan du undertrykke fejl, når arvemålet ikke findes. Dette er særligt nyttigt i bibliotekslignende kode eller i tilfælde, hvor pladsholdere defineres betinget.

Følgende er et eksempel på sikkert at forsøge at arve en klasse, der måske ikke eksisterer, ved brug af !optional.

1/* Try to extend a class that might not exist */
2.component {
3  @extend .maybe-existing !optional;
4  padding: 1rem;
5}

• Hvis .maybe-existing ikke findes, sker der intet og det springes over. Du kan bruge dette, når du ønsker at prøve en udvidelse sikkert.

Genereret CSS

1.component {
2  padding: 1rem;
3}

Sammenligning af @extend og mixins (@mixin / @include)

@extend og @mixin har til tider overlappende formål, men deres output og brugssituationer er forskellige.

• @extend

  • Den genererede CSS reducerer redundans ved at sammenflette selektorer.
  • Fordi selektorer flettes efter genereringen, kan utilsigtede kombinationer opstå.
  • Parametre kan ikke gives videre (dog kan dette kompenseres ved at kombinere placeholders).

• @mixin / @include

  • Hver kald duplikerer stilarterne (hvilket giver redundant output).
  • Du kan sende parametre og inkludere logik såsom betingelser eller løkker.
  • Outputtet er mere forudsigeligt, men filstørrelsen vokser.

Nedenfor er en sammenligning, hvor både @mixin og @extend bruges til at implementere de samme knapstilarter.

 1/* Mixin approach */
 2@mixin btn-styles($bg, $color) {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  background: $bg;
 6  color: $color;
 7  border-radius: 4px;
 8}
 9
10/* Use mixin */
11.btn {
12  @include btn-styles(white, #333);
13}
14
15.btn--primary {
16  @include btn-styles(#007bff, white);
17}
18
19/* Extend approach (shared placeholder) */
20%btn-base {
21  display: inline-block;
22  padding: 0.5rem 1rem;
23  border-radius: 4px;
24}
25
26.btn2 {
27  @extend %btn-base;
28  background: white;
29  color: #333;
30}
31
32.btn2--primary {
33  @extend %btn-base;
34  background: #007bff;
35  color: white;
36}

• @mixin giver dig fleksibilitet til at indsætte stilarter, mens @extend konsoliderer output effektivt, så du kan vælge alt efter situationen.

Genereret CSS

Output fra @mixin

 1.btn {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  background: white;
 5  color: #333;
 6  border-radius: 4px;
 7}
 8
 9.btn--primary {
10  display: inline-block;
11  padding: 0.5rem 1rem;
12  background: #007bff;
13  color: white;
14  border-radius: 4px;
15}

Output fra @extend

 1.btn2,
 2.btn2--primary {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn2 {
 9  background: white;
10  color: #333;
11}
12
13.btn2--primary {
14  background: #007bff;
15  color: white;
16}

Praktiske retningslinjer

SASS-arv er en kraftfuld funktion til at øge genbrugeligheden af stilarter. Dog kan forkert brug gøre sammenfletning af stilarter kompleks og reducere vedligeholdelsen. Nedenfor er nogle nøglepunkter til at bruge arv sikkert og effektivt.

• Brug pladsholdere til rene fælleskomponent-stilarter såsom struktur og layout. Derudover kan du bruge @mixin, hvis der er behov for dynamisk parameterisering.
• Du bør undgå at arve HTML-elementer som h1 direkte. Utilsigtede selektorkombinationer kan opstå og resultere i, at uventet CSS bliver genereret.
• Brug af navngivningskonventioner som BEM eller klare præfikser til at vise formålet med hver placeholder, hjælper med at holde tingene sikre.
• Det er mere sikkert at bruge @extend inden for den samme fil. Især i store projekter anbefales det at designe arv inden for hver komponents område for at gøre det nemmere at spore arverelationer.

Sammendrag

@extend-funktionen i SASS er en bekvem måde effektivt at genbruge fælles stilarter og sikre designkonsistens. Dog kan selektorkombinationer nemt blive komplekse, så det er nødvendigt at bruge denne funktion omhyggeligt og i begrænset omfang. Ved at gruppere fælles stilarter med pladsholder-selektorer (%placeholder) og bruge @mixin til dele, der kræver dynamiske parametre, kan du bevare et simpelt og let vedligeholdeligt design.

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