Nogle gange kan det være udfordrende at skrive al koden i én fil. Sass muliggør opdeling af koden i forskellige filer og mapper. Det forenkler vedligeholdelse og refaktorering af koden.

sass-mappe

Første opgave er at oprette mappen sass i projektets rodmappe. På denne måde informerer vi kompilatoren om, at vi anvender sass i projektet.

sass-mappeorganisering

I sass-mappen:

1. Opret filen main.scss. Dette er hovedfilen for kompilatoren. Alle fragmenter forbindes til denne fil ved hjælp af @import-direktivet.
2. Opret forskellige mapper til sass-partials. (f.eks. mappen utilities til variabler, mappen components til gentagne stilarter for visse elementer, mappen base til globale stilarter og nulstilling af standardelementadfærd, samt mappen layouts til ikke-gentagne stilarter).

partials

Nu er vi klar til at tilføje filer og skrive noget sass-kode for at tildele stilarter til elementerne. For at bevare strukturen oprettes én fil for hver funktion. Filnavnet skal starte med en understregning (_). For kompilatoren betyder det, at det ikke er hovedfilen. Det er en partial.

Hele strukturen er klar. Alle filer kan importeres til main.scss-filen ved hjælp af @import-direktivet. Rækkefølgen er vigtig. Hvis der for eksempel skal bruges variabler fra filen _variables.scss i filen _button.scss, skal importen af _variables.scss placeres højere end importen af _button.scss i main.scss-filen.

Syntaksen for import af en fil er følgende. Brug @import og dobbelte anførselstegn ("") til at angive den korrekte sti til filen.

@import "path";

Det resulterende indhold i main.scss-filen er følgende:

@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";

Bemærk

Vi har gennemgået det grundlæggende i sass-preprocessoren, som gør det muligt at anvende den i projekter. Dog har enhver preprocessor et væld af forskellige funktioner. At dække dem alle ligger uden for rammerne af dette kursus.