CSS limitations that SASS solves - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a variable in SASS.

SASS

$primary-color: [1];

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

Amargin

Bcolor

Cfont-size

D#3498db

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS property names instead of a color value.

Forgetting the dollar sign before the variable name.

In SASS, variables start with $ and store values like colors. Here, $primary-color is set to a hex color code.

2fill in blank

medium

Complete the code to nest CSS selectors in SASS.

SASS

nav {
  ul {
    [1]: none;
  }
}

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

Apadding

Blist-style

Ccolor

Dfont-weight

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated properties like color or padding here.

Not understanding how nesting works in SASS.

Nesting selectors in SASS lets you write CSS inside CSS. Here, list-style: none; removes bullet points from the list inside nav.

3fill in blank

hard

Fix the error in the SASS mixin definition.

SASS

@mixin rounded-corners([1]) {
  border-radius: 5px;
}

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

A$radius

Bradius

C#radius

D&radius

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dollar sign in the parameter name.

Using invalid characters like # or & in variable names.

Mixin parameters in SASS must start with a dollar sign. Here, $radius is the correct parameter name.

4fill in blank

hard

Fill both blanks to create a SASS map and access its value.

SASS

$colors: (primary: [1], secondary: #2ecc71);
.button {
  color: map-get($colors, [2]);
}

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

A#3498db

Bprimary

Csecondary

D#e74c3c

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up keys and values in the map.

Using color codes instead of keys when accessing map values.

The map $colors stores color values. We assign #3498db to primary and then get it with map-get($colors, primary).

5fill in blank

hard

Fill all three blanks to create a SASS function that darkens a color.

SASS

@function darken-color($color, $amount) {
  @return [1]($color, [2]: $amount);
}

.button {
  background-color: darken-color([3], 10%);
}

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

Adarken

Bamount

C$primary-color

Dlighten

Attempts:

3 left

💡 Hint

Common Mistakes

Using lighten instead of darken.

Passing the wrong parameter name to the function.

Using a raw color code instead of a variable.

The darken function in SASS takes a color and an amount to darken it. We pass $primary-color and 10% to create a darker button background.