First SASS stylesheet - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a variable for the main color.

SASS

$main-color: [1];

Drag options to blanks, or click blank then click option'

A#3498db

Bcolor

Cmain-color

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of a color value.

Forgetting the semicolon at the end.

The variable $main-color is assigned the color value #3498db. In SASS, variables start with $ and store values like colors.

2fill in blank

medium

Complete the code to use the variable $main-color for the background color.

SASS

body {
  background-color: [1];
}

Drag options to blanks, or click blank then click option'

A$main-color

Bmain-color

C#fff

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the $ sign before the variable.

Using a color value directly instead of the variable.

To use a SASS variable, include the $ sign before the variable name. Here, $main-color sets the background color.

3fill in blank

hard

Fix the error in the nested style by completing the selector for the h1 inside header.

SASS

header {
  background: $main-color;
  [1] {
    color: white;
  }
}

Drag options to blanks, or click blank then click option'

A.h1

Bh1

C#h1

Dheader h1

Attempts:

3 left

💡 Hint

Common Mistakes

Using class or id selectors instead of element selectors.

Repeating the parent selector inside the nested block.

In SASS, nested selectors are written simply by the element name. Here, h1 inside header is nested as h1.

4fill in blank

hard

Fill both blanks to create a nested style for nav inside header with a hover effect on links.

SASS

header {
  [1]: $main-color;
  nav {
    a {
      color: white;
      &:[2] {
        color: #f39c12;
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

Abackground

Bhover

Cactive

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using border instead of background for color.

Using active instead of hover for mouse hover effect.

The background property sets the color for header. The &:hover selector applies styles when the mouse is over the link.

5fill in blank

hard

Fill all three blanks to create a SASS map of colors and use it to set the border color.

SASS

$colors: (
  primary: [1],
  secondary: [2]
);

.box {
  border: 2px solid map-get($colors, [3]);
}

Drag options to blanks, or click blank then click option'

A#2980b9

B#2ecc71

Cprimary

Dsecondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using color values as keys instead of keys as strings.

Forgetting to use map-get to access map values.

The map $colors stores color values with keys primary and secondary. The map-get function retrieves the color by key. Here, the border uses the primary color.