Untitled

                Never    
HTML
       
<!DOCTYPE html>
<html lang="nl">
<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>Examenvraag Bootstrap 4</title
    <!--
    
    Met onderstaande webpagina toon je de kleuren van de regenboog in staafjes. Deze code is erg omslachtig geschreven. Maak gebruik van een mixin om deze code korter en effecienter te maken.
    
    Zo geraak je snel op weg:
        1. Open het project van de cursus '14. Bootstrap 4 voor gevorderden' (dit heb je normaal al uit de les) in PhpStorm.
        2. Verzeker jezelf ervan dat Note Package Manager is geinstalleerd (nmp install of klik op de melding in PhpStorm).
        3. Maak een partial met naam '_regenboog.scss' aan en koppel deze correct in de hoofd SCSS-file. Maak ook een html-pagina aan met naam 'regenboog.html' waarin je de code van ondestaand voorbeeld letterlijk in overneemt.
        4. In deze partial maak je een mixin om de CSS-properties van de gekleurde staafjes snel in te definieren. De kleur geef je op als argument van de partial bij oproep.
        5. Pas de CSS-code in regenboog.html onder head => style nu aan, zodat deze voor ieder staafje gebruik maakt van de net gemaakte mixin.
    
    -->
    <style>
        /*Oplossing: 
        met gebruik van partial _regenboog
        */
        @mixin regenboog-streep($kleur){
            background-color: $kleur;
            height: 600px;
            border-radius: 15px;
        }
        .red{
            @include regenboog-streep(red);
        }
        .orange{
            @include regenboog-streep(orange);
        }
        .yellow{
            @include regenboog-streep(yellow);
        }
        .green{
            @include regenboog-streep(green);
        }
        .blue{
            @include regenboog-streep(blue);
        }
        .purple{
            @include regenboog-streep(purple);
        }
        
        /*Opgaven: */
        .red{
            background-color: red;
            height: 600px;
            border-radius: 15px;
        }
        .orange{
            background-color: orange;
            height: 600px;
            border-radius: 15px;
        }
        .yellow{
            background-color: yellow;
            height: 600px;
            border-radius: 15px;
        }
        .green{
            background-color: green;
            height: 600px;
            border-radius: 15px;
        }
        .blue{
            background-color: blue;
            height: 600px;
            border-radius: 15px;
        }
        .purple{
            background-color: purple;
            height: 600px;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-2 red">
          Red
        </div>
        <div class="col-2 orange">
          Orange
        </div>
        <div class="col-2 yellow">
          Yellow
        </div>
        <div class="col-2 green">
          Green
        </div>
        <div class="col-2 blue">
          Blue
        </div>
        <div class="col-2 purple">
          Purple
        </div>
      </div>
    </div>
</body>
</html>

Raw Text