Het is soms lastig om alle code in één bestand te schrijven. Sass maakt het mogelijk om de code op te splitsen in verschillende bestanden en mappen. Dit vereenvoudigt het onderhoud en het refactoren van de code.

sass-map

De eerste stap is het aanmaken van de map sass in de hoofdmap van het project. Hiermee geven we aan de compiler door dat we sass in het project gebruiken.

sass mapstructuur

In de map sass:

1. We maken het bestand main.scss aan. Dit is het hoofdbestand voor de compiler. We koppelen alle fragmenten aan dit bestand met behulp van de @import-directive;
2. We maken verschillende mappen aan voor de sass-partials. (bijvoorbeeld de map utilities voor variabelen, de map components voor herhalende stijlen van bepaalde elementen, de map base voor globale stijlen en het resetten van standaard elementgedrag, en de map layouts voor niet-herhalende stijlen).

partials

Nu zijn we klaar om bestanden toe te voegen en sass-code te schrijven om stijlen aan de elementen toe te voegen. Om de structuur te behouden, maken we één bestand per functionaliteit aan. De bestandsnaam moet beginnen met een underscore (_). Voor de compiler betekent dit dat het geen hoofdbestand is, maar een partial.

De volledige structuur is gereed. We kunnen alle bestanden importeren in het main.scss-bestand met behulp van de @import-directive. De volgorde is belangrijk. Bijvoorbeeld, als we variabelen uit het bestand _variables.scss willen gebruiken in het bestand _button.scss, dan moet de import van het bestand _variables.scss hoger staan dan de import van het bestand _button.scss in het main.scss-bestand.

De syntaxis voor het importeren van een bestand is als volgt. We gebruiken @import en dubbele aanhalingstekens ("") om het juiste pad naar het bestand op te geven.

@import "path";

De uiteindelijke inhoud in het main.scss-bestand is als volgt:

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

Opmerking

We hebben de basisprincipes van de sass-preprocessor behandeld die ons in staat stellen deze te gebruiken voor projecten. Elke preprocessor beschikt echter over een groot aantal verschillende functies. Het behandelen van al deze functies valt buiten de scope van deze cursus.