Ibland är det utmanande att skriva all kod i en fil. Sass möjliggör uppdelning av koden i olika filer och mappar. Det förenklar underhåll och omstrukturering av koden.

sass-mapp

Vårt första steg är att skapa mappen sass i projektets rotkatalog. På så sätt informerar vi kompilatorn om att vi använder sass i projektet.

sass-mappstruktur

I mappen sass:

1. Skapa filen main.scss. Detta är huvudfilen för kompilatorn. Alla fragment kopplas till denna fil med hjälp av direktivet @import.
2. Skapa olika mappar för sass-partials. (t.ex. mappen utilities för variabler, mappen components för återkommande stilar för vissa element, mappen base för globala stilar och återställning av standardbeteende för element, samt mappen layouts för icke-återkommande stilar).

partials

Nu är vi redo att lägga till filer och skriva sass-kod för att ge stilar till elementen. För att behålla strukturen skapar vi en fil för varje funktion. Filnamnet måste börja med ett understreck (_). För kompilatorn betyder det att det inte är huvudfilen. Det är en partial.

Hela strukturen är klar. Vi kan importera alla filer till filen main.scss med hjälp av direktivet @import. Ordningen är viktig. Om vi till exempel vill använda variabler från filen _variables.scss i filen _button.scss, måste importen av _variables.scss ligga före importen av _button.scss i filen main.scss.

Syntaxen för att importera en fil är följande. Vi använder @import och dubbla citattecken ("") för att ange rätt sökväg till filen.

@import "path";

Det resulterande innehållet i filen main.scss är följande:

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

Obs

Vi har gått igenom grunderna i sass-preprocessorn som gör det möjligt att använda den i projekt. Dock har varje preprocessor ett stort antal olika funktioner. Att täcka alla dessa ligger utanför ramen för denna kurs.