Why logic in stylesheets is needed in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a variable for primary color in Sass.

SASS

$primary-color: [1];

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

A#3498db

Bprimary-color

Ccolor-primary

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without $ sign

Assigning invalid color names

In Sass, variables start with $ and are assigned values like colors. Here, #3498db is a valid color value.

2fill in blank

medium

Complete the code to create a mixin that sets font size in Sass.

SASS

@mixin font-size-[1]($size) {
  font-size: $size;
}

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

Alarge

Btext

Cset

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names like 'set'

Using incomplete names

Mixin names should be descriptive. font-size clearly indicates the mixin sets font size.

3fill in blank

hard

Fix the error in the conditional statement to check if $theme is dark.

SASS

@if $theme [1] 'dark' {
  background-color: black;
}

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

A=

B==

C===

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using single equals instead of double

Using triple equals which is invalid in Sass

In Sass, to compare values use ==. Single = is for assignment.

4fill in blank

hard

Fill both blanks to create a loop that generates margin classes from 1 to 3 rem.

SASS

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

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

Afrom

Bto

Cthrough

Duntil

Attempts:

3 left

💡 Hint

Common Mistakes

Using to excludes the last number

Using until is invalid in Sass

The @for loop syntax uses from and through to include the last number.

5fill in blank

hard

Fill all three blanks to create a map of colors and access the primary color.

SASS

$colors: ([1]: #ff0000, [2]: #00ff00, [3]: #0000ff);

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

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

Ared

Bgreen

Cblue

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'primary' as a key which is not defined

Mixing keys and values incorrectly

Maps in Sass use keys like red, green, and blue. To get the primary color, use the red key.