Why design systems need SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a SASS variable for primary color.

SASS

$primary-color: [1];

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

Aprimary

Bcolor

C#3498db

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name without #

Using a word like 'primary' instead of a color value

The correct way to declare a color variable in SASS is by assigning a color value like a hex code.

2fill in blank

medium

Complete the code to create a nested style for a button inside a container.

SASS

.container {
  .button [1] {
    background-color: $primary-color;
  }
}

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

A:hover

B.hover

C#hover

D&:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover without & inside nested block

Using .hover which is a class, not a pseudo-class

In SASS, to style a hover state nested inside a selector, use &:hover to refer to the parent selector with hover.

3fill in blank

hard

Fix the error in the SASS mixin definition to accept a color parameter.

SASS

@mixin button-style($color) {
  background-color: [1];
  border: 1px solid darken($color, 10%);
}

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

A$color

Bcolor

Cprimary-color

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable not passed as parameter

Using a hardcoded color instead of the parameter

The mixin uses the parameter $color to set the background color, so the variable $color must be used.

4fill in blank

hard

Fill both blanks to create a map of font sizes and access a size.

SASS

$font-sizes: (small: 0.8rem, medium: 1[1]rem);
body {
  font-size: map-get($font-sizes, [2]);
}

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

A.5

Bmedium

Csmall

D1.2

Attempts:

3 left

💡 Hint

Common Mistakes

Using full number 1.5 in one blank

Using wrong key name in map-get

The font size for medium is 1.5rem, so .5 completes 1.5rem. Then medium is used to get that size from the map.

5fill in blank

hard

Fill all three blanks to create a responsive grid with SASS variables and media query.

SASS

$columns: 12;
$gap: 1[1]rem;
.container {
  display: grid;
  grid-template-columns: repeat([2], 1fr);
  gap: $gap;
}
@media (max-width: [3]) {
  .container {
    grid-template-columns: repeat(6, 1fr);
  }
}

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

A.5

B12

C768px

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 instead of .5 for gap

Using wrong number of columns

Using wrong media query size

The gap is 1.5rem, so .5 completes it. The grid uses 12 columns, so 12 is correct. The media query breakpoint is commonly 768px for tablets.