Een stijlesheet in sass

We hebben nu twee bestanden, een voor onze variabelen met daarin alvast een variabele om te kunnen testen en we hebben het hoofd bestand styles.scss. Laten we de body van de pagina een achtergrond kleur geven, compileren en dan kijken of alles wat we tot dusver hebben gedaan werkt.

styles.scss

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/* 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' // De code hieronder hebben we zojuist toegevoegd. body { background-color:$background-color; }

SASS compileren

1 2 3 4

Navigeer nu met je browser naar de public_html map in de sass-boilerplate code en bekijk het resultaat. Als alles goed is gegaan heeft je pagina nu een donkere achtergrond gekregen.

Navigatie

« Opdracht code schrijven De watch flag »