Opdracht code schrijven

Maak het bestand variables.scss aan in de src map, voeg je naam en klas toe in commentaar van het type wat na het compileren verdwijnt // dit type commentaar dus. Schrijf, bij voorkeur in het engels bovenin dat dit het standaard theme van de website is en dat hier alle instellingen staan. We gaan dit bestand gebruiken om de kleuren in vast te leggen, welke lettertypes de website zal gaan gebruiken en wat de marges zijn tussen blokken. In het voorbeeldje hieronder hebben we vast een variable $text-color: #888888; gedefinieerd, dit is om straks te kunnen testen of het compileren werkt dus neem dit over.

Voorbeeld variables.scss
1 2 3 4 5 6 7 8 9 10
// Dit bestand bevat alle variabelen voor de website ... (verzin wat) // Dit bestand is gemaakt door: ............ // Datum: .......... // Klas: .......... // ---------------------------------------- // Net als in PHP hebben variabelen een dollar teken. (alleen hier mag je wel gebruik maken van het "-" teken in // variabele namen. $background-color: #888888;

Importeren

Nu we een apart bestand hebben gemaakt voor onze variabelen moeten we er nog voor zorgen dat dit bestand wordt gebruikt. In SASS gebruiken we hiervoor het @import <bestandsnaam> statement waarbij de bestandsnaam zonder extensie wordt gebruikt. Open src/styles.scss en importeer variables.scss. Je hoeft in SASS geen extentie op te geven achter je @import statement. Sass zoekt naar variables.scss, variables .sass, variables.css en gebruikt het eerste bestand wat beschikbaar is.

Lees de @import documentatie als je meer wilt weten of het niet helemaal begrijpt.

styles.scss
1 2 3 4 5 6 7 8 9 10 11 12 13
/* Dit is het hoofd sass bestand, het commentaar wat ik tussen deze tags zet komt ook in het uiteindelijke css bestand. Dit bestand is gemaakt door ...... Datum ..... Klas .... */ // Commentaar wat met twee slashes start komt niet in het gecompileerde css bestand. // Dit import statement kijkt in de huidige map naar een bestand variables.scss, variables.sass, variables.css. // Zodra een van die bestanden gevonden wordt zal deze worden ingeladen op deze plek. @import 'variables'

Navigatie

« Code organiseren Een stijlesheet in sass »