# Exercises

REMARK

Start with downloading sass-exercises.zip, in which all the starting files of the Sass exercises are bundled
- The folder structure of these exercises is similar to the structure used for the examples: the (main) Sass file scss/style.scss should be compiled to dist/css/style.css, as the latter is the CSS file which is linked to in the HTML page dist/index.html
- We also included a package.json file with some (npm) script definitions in it, so that you can use the
  npm run <name-script> commands to start live-server and the Sass compilations for the respective exercises

# Exercise 1

Topics involved: variables, functions and nesting
Study the code in exercise1/dist/index.html, which results in the following output (without any styling):

ex1-start

Write SCSS code in exercise1/scss/style.scss to achieve the following result:

Instructions:
- Declare (and use) a variable $fontstack and store the imported Google font 'Gotu' in this variable
- Declare (and use) a variable $fontsize with value 16px
- Declare a variable $primary with value lightskyblue. Use a Sass function to darken this color and save the result in the variable $primary_dark
  - Later on, you can change this color to another "light" color, e.g. lightpink (0:27 in solution video) or aquamarine (0:37 in solution video) and your whole page (including the navbar) will be "re-colored"
- Add a universal reset, apply a standard line-height and add some paddings where needed
- The #container should be centered horizontally and has a maximum width of 800px
- The text color of the major heading h1 is $primary-dark
- Use the flexbox technique to transform the unordered list in the nav element to a full-blown navbar
  - Use nesting (so that the other list in the document is not affected)
  - The background-color of the items equals $primary, while the outline (gives better results than border) and link texts are shown in $primary-dark
  - When hovering over a menu-item, the link is made bold and the colors (color and background-color) are switched in a transition of 1s
  - For small screens, the menu-items are placed beneath each other. From screen widths of 650px or larger, the menu-items are placed besides each other
- Adjust the left margin of the unordered list in the main element (so that the bullets are horizontally aligned with the rest of the document)

# Exercise 2

Topics involved: variables, functions and mixins
Study the code in exercise2/dist/index.html, which results in the following output (without any styling):

ex2-start

Write SCSS code in exercise2/scss/style.scss to achieve the following result:
- Extra small (< 576px) screen:
- Small (< 768px) screen:
- Medium (>= 768px) screen or larger:
Instructions:
- Declare 2 variables $small (with value 576px) and $medium (with value 768px)
- Write a mixin layout with 2 arguments $color and $size (with default value 14px), which sets
  - the (text) color to $color
  - the background-color to the inverted color of $color, but with an adjusted $lightness of 20%
  - the font-size, margin and padding equal to $size
  - the line-height equal to 1.5 (or $size*1.5)
  - a solid border of 5px in color $color
- Add a universal reset and some paddings where needed
- Use Verdana (with a suitable fallback font)
- Use the mixin layout to give #container a layout based on darkred (and the default $size of 14px)
- On small screens, the layout should be based on darkblue and 16px
- On medium screens (or larger), the layout should be based on darkgreen and 20px

# Exercise 3

Topics involved: variables, functions, nesting, mixins and partials
Study the code in exercise3/dist/index.html, which results in the following output (without any styling):

ex3-start

Write SCSS code in exercise3/scss to achieve the following result:

Instructions:
- Make 3 new partials: _variables.scss, _mixins.scss and _reboot.scss
- In your main file style.scss, you import the Google font 'Anton' and these 3 partials (in the correct order)
- _variables.scss
  - Declare 3 variables $fontstack-titles ('Anton' with a suitable fallback font) , $fontstack-text (Verdana with fallback font) and $small (600px)
- _mixins.scss
  - Copy the mixin layout (from Exercise 2) to this file
- _reboot.scss
  - Add a universal reset
  - body:
    - font: $fontstack-text
    - layout based on white and 1rem for extra small screens (< 600px)
    - layout based on black and 1.25rem for small screens or larger (>= 600px)
  - main heading:
    - font: $fontstack-titles with size 1.75rem
    - some padding at the bottom
  - paragraphs (in article)
    - some padding at the bottom
  - links in all states:
    - block elements with a width of 130px
    - font: $fontstack-titles
    - layout based on black and 1rem (remove the margin on the left!)
  - links when hovered:
    - layout based on dimgray and 1rem

# Exercise 4

Topics involved: nesting, mixins and partials
Study the code in exercise4/dist/index.html, which results in the following output (without any styling):

ex4-start

Write SCSS code in exercise4/scss to achieve the following result:

Instructions:
- Make 2 new partials: _mixins.scss and _reboot.scss
- In your main file style.scss, you import these 2 partials (in the correct order)
- _mixins.scss
  - Write a mixin frame with 6 parameters
    - $thickness: thickness of the border
    - $style: style of the border (default = solid)
    - $color-border: border color (default = #OOO)
    - $color-bg: background-color (default = #eee)
    - $padding: space on the inside of the element (default = 10px)
    - $radius: rounding applied to the element (default = 15px)
    - and, when hovering: a box-shadow in 0.75 opaque black, 5px to the right and the bottom, with a blur of 10px
- _reboot.scss
  - Add a universal reset and some padding below the main heading
  - body:
    - font: Geneva with a suitable fallback font
    - black text on gray (#ccc) background
  - article:
    - maximum width of 800px, centered
    - white (#fff) background
    - centered content
  - section
    - Use flexbox to display the images next to each other (with equal space between them), and on multiple lines when needed
    - img (in section)
      - width and height equal to 225px
      - some margin at the bottom
      - Add some layout using the mixin frame:
        1st image: border thickness 3px, no other parameters specified
        
        2nd image: border thickness 3px, border style dotted, no other parameters specified
        
        3rd image: border thickness 3px, border style solid, border color mediumseagreen, no other parameters specified
        
        4th image: border thickness 6px, border style solid, border color #b8181b, background #e7d5c2, 20px space on the inside and rounding of 40px
        
        5th image: border thickness 6px, border style dashed, border color rgb(109,85,106), peru background, 20px space on the inside and rounding of 50%
        
        6th image: border thickness 3px, background #aac5d9, 20px space on the inside and rounding of 50%, no other parameters specified
        TIP
        
        Use the nth-child() (pseudo-class) selector to identify the different images

# Exercise 5

Topics involved: variables, functions, mixins, partials and advanced topics
In this exercise, you start from the source code of TMF (see Example 2)
In index.html, we already added
- some new classes to the body and main element
- extra paragraphs with some new classes assigned to it

<body class="bg-gray-50">
<main class="container bg-white-90 py-4">
    ...

    <h2>Exercise 5</h2>
  
    <h3>&lt;p class="box-success"&gt;</h3>
    <p class="box-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet architecto, dicta
      distinctio doloremque explicabo fuga illo inventore ipsa iste libero maxime mollitia nesciunt nostrum nulla 
      perspiciatis quidem.</p>
  
    <h3>&lt;body class="bg-gray-50"&gt;</h3>
    <p>Changes the background color of the <code>body</code> element</p>
  
    <h3>&lt;main class="container bg-white-90 py-4"&gt;</h3>
    <p>Changes the background color and (vertical) padding of the <code>main</code> element</p>
  
    <h3>&lt;p class="bg-info-40 p-3"&gt;</h3>
    <p class="bg-info-40 p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi 
      blanditiis ducimus iusto magnam modi officiis provident reprehenderit sunt veritatis? Ad commodi culpa 
      earum eligendi enim incidunt?</p>
</main>
</body>

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

It's up to you to write the Sass code that will generate these new classes such that the index page looks as follows:

ex5 result 1 ex5 result 12

Instructions:
- .box-primary, .box-danger, ...
  - Add a new partial helpers/_box.scss
  - Use an @each rule to define the classes .box-primary, .box-danger, ... which change an element into a "box" with colors based on the colors defined in $color-map
    - The text color equals the specified color
    - The background-color equals the specified color, but with an alpha value of 0.15
    - Add a solid, 1px border in the specified color, but with an adjusted $lightness of -10%
    - Add a padding and margin-bottom of 1rem
    - Add a border-radius of 0.25rem
  - Afterwards, try moving the "box code" to a mixin color-box in mixins/_colorbox.scss
    - Import this new partial mixins/_colorbox.scss at the correct place in style.scss
    - The mixin color-box should have (at least) one parameter for the $color (but you might add different parameters as well)
- .bg-primary-50, .bg-danger-90, ...
  - Add a new partial helpers/_background.scss
  - Use a nested iteration (@for within @each or vice versa) to generate the classes .bg-primary-X, .bg-danger-X, ... with X equal to 0, 10, 20, ..., 100
    - The background-color should be set to the specified color, with an alpha value of X/100
- Classes for padding (.p-3, .pt-5, ...) and margin (.mx-2, ml-0, ...)
  - Add a new partial helpers/_spacing.scss
  - Use a @for rule to define the padding classes .p-X, .px-X, .py-X, .pt-X, .pr-X, .pb-X and .pl-X to add (overall, horizontal, vertical, top, right, bottom and left) padding
    - The value of X ranges from 0 to 5 (included!) resulting in a padding value of X/3rem
  - Similarly, generate also the corresponding (overall, horizontal, vertical, top, right, bottom and left) margin classes .m-X, .mx-X, .my-X, .mt-X, .mr-X, .mb-X and .ml-X