Een start maken

Hieronder staan instructies die bedoeld zijn om je bekend te maken met de boilerplate code. Nadat je hebt gezien welke bestanden er allemaal staan en waar jij jouw aanpassingen moet gaan maken, gaan we de compiler starten en onze eerste css code genereren. Zodra het handmatig compileren werkt stellen we je IDE zo in dat het compileren automatisch gaat.

Werkomgeving opstarten

  1. Start je IDEen open in je IDE het boilerplate project wat je in de vorige stap waarschijnlijk in je htdocs map hebt gezet.
  2. Open een nieuw tabblad, in je browser waarschijnlijk moet je even doorklikken naar de public_html map. Deze map heet de document root, het is belangrijk dat je weet wat een document root is.
  3. Open een windows commandline of de terminal in je IDE (die twee zijn meestal hetzelfde)
  4. Als jouw terminal nog niet in de juiste map zit, gebruik dan het dir en het cdcommando om naar de project map te gaan.
    Weet je niet hoe dit moet, kijk hier: navigeren met de terminal.
  5. Je kan het beste voor nu even navigeren naar de hoofdmap, dus een map boven de document root wat in dit geval dus de map boven public_html is.

Commentaar

In sass heb je verschillende soorten commentaar. Wanneer commentaar start met twee forward slashes dan wordt dat commentaar NIET meegenomen naar de uiteindelijke stylesheet na het compileren. Wanneer je de commentaar-stijl gebruikt die ook in css gebruikelijk is, dus tussen /* en */ dan wordt dit commentaar WEL meegenomen naar de uiteindelijke stijlesheet.

// Dit commentaar blijft wel staan in mijnstijl.scss maar komt niet in mijnstijl.css terecht.

/* Dit commentaar wordt wel meegenomen naar mijnstijl.css. */

Opdracht, code schrijven

Open het bestand src/styles.scss in je IDE. Vermeld in commentaar je naam, je klas en de datum. Doe dit op zo'n manier dat deze gegevens ook in het uiteindelijke css bestand terecht komen. Commentaar schrijven we doorgaans in het engels en variabele namen ook.

Waarschuwing toevoegen

Stel dat een developer die na jou komt niet op de hoogte is van het feit dat het css bestand gegenereerd is en wat regels toevoegt aan het css bestand. Vervolgens krijg jij de vraag om een ander onderdeel van de site te maken en je voegt wat regels toe aan het styles.scss. De regels die je collega had toegevoegd zullen nu worden overschreven. Voeg daarom een waarschuwing to in de comments

Voorbeeld waarschuwing header - styles.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* * WARNING: This CSS file is auto-generated. * * Do NOT modify this file directly, as any changes will be overwritten. * To make changes, edit the corresponding SCSS file: /src/styles.scss * * This CSS file is compiled automatically from the SCSS file using the Sass compiler. * After editing the SCSS file, run the compiler to regenerate this CSS. * * For more information on how to compile SCSS into CSS, refer to: sass-lang.com * * Author: [Your Name] * Email: [your.email@example.com] * * Feel free to reach out if you have any questions. */

Navigatie

« Sass code schrijven Code organiseren »