# 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:
      ex2-xs
    • Small (< 768px) screen:
      ex2-sm
    • Medium (>= 768px) screen or larger:
      ex2-md
  • 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
Last Updated: 11/3/2022, 9:15:46 PM