Reducing compiled CSS size in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use a variable for the primary color.

SASS

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

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

Acolor-primary

Bblue

Cprimary

D#3498db

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name as a value instead of a color code.

Forgetting the $ sign for variables.

Using a variable like $primary-color with a hex color code helps reuse the color and reduces repetition in compiled CSS.

2fill in blank

medium

Complete the code to nest the styles for the button's hover state.

SASS

.button {
  background-color: #3498db;
  [1] {
    background-color: #2980b9;
  }
}

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 & causes invalid nesting.

Using class or id selectors incorrectly.

Using & in Sass refers to the parent selector, so &:hover nests the hover style inside .button.

3fill in blank

hard

Fix the error in the mixin usage to reduce repeated code.

SASS

@mixin button-style($bg-color) {
  background-color: $bg-color;
  color: white;
  padding: 1rem;
}

.primary-button {
  [1] button-style(#3498db);
}

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

A@include

B@use

C@import

D@extend

Attempts:

3 left

💡 Hint

Common Mistakes

Using @use or @import instead of @include for mixins.

Forgetting the @ symbol.

To use a mixin in Sass, you write @include followed by the mixin name and arguments.

4fill in blank

hard

Fill both blanks to create a map of colors and access a color in the style.

SASS

$colors: (primary: #3498db, secondary: #2ecc71);

.button {
  background-color: map-get($colors, [1]);
  color: [2];
}

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

Aprimary

B#fff

Csecondary

D#000

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the key in map-get.

Choosing a text color that doesn't contrast well.

map-get($colors, primary) gets the primary color from the map. Using #fff for text color ensures good contrast.

5fill in blank

hard

Fill all three blanks to create a loop that generates margin classes with decreasing sizes.

SASS

@for $i from [1] through [2] {
  .m-#{$i} {
    margin: [3]rem;
  }
}

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

A5

B1

C$i

D0.5

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing the loop start and end values.

Using a fixed margin instead of the loop variable.

The loop runs from 1 through 5, creating classes .m-1 to .m-5 with margin equal to $i rem units.