Conditional mixins with @if in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mixin that applies a background color only if the condition is true.

SASS

@mixin bg-color($color, $apply) {
  @if [1] {
    background-color: $color;
  }
}

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

A$apply == true

B$color == red

C$apply = true

D$color != null

Attempts:

3 left

💡 Hint

Common Mistakes

Using a single '=' instead of '==' for comparison.

Checking the wrong variable in the condition.

The mixin uses @if to check if $apply is true before applying the background color.

2fill in blank

medium

Complete the code to include a font size only if the size is greater than 0.

SASS

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

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

A$size < 0

B$size == 0

C$size != 0

D$size > 0

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>' in the condition.

Checking for equality with 0 instead of greater than 0.

The mixin applies font-size only if $size is greater than 0.

3fill in blank

hard

Fix the error in the mixin to correctly check if $enabled is true.

SASS

@mixin toggle($enabled) {
  @if [1] {
    display: block;
  } @else {
    display: none;
  }
}

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

A$enabled = true

B$enabled == true

C$enabled === true

Denabled == true

Attempts:

3 left

💡 Hint

Common Mistakes

Using single '=' which assigns instead of compares.

Omitting the '$' in variable name.

Use '==' to compare $enabled with true in Sass conditions.

4fill in blank

hard

Fill both blanks to create a mixin that sets padding only if $padding is not null and greater than 0.

SASS

@mixin set-padding($padding) {
  @if [1] and [2] {
    padding: $padding;
  }
}

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

A$padding != null

B$padding == null

C$padding > 0

D$padding < 0

Attempts:

3 left

💡 Hint

Common Mistakes

Checking if $padding is null instead of not null.

Using '<' instead of '>' for size comparison.

The mixin checks that $padding is not null and greater than 0 before applying padding.

5fill in blank

hard

Fill all three blanks to create a mixin that sets color only if $color is not null, $enabled is true, and $mode equals 'dark'.

SASS

@mixin set-color($color, $enabled, $mode) {
  @if [1] and [2] and [3] {
    color: $color;
  }
}

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

A$color != null

B$enabled == true

C$mode == 'dark'

D$mode != 'dark'

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!=' instead of '==' for $mode comparison.

Omitting the '$' in variable names.

Using assignment '=' instead of comparison '=='.

The mixin applies color only if $color is set, $enabled is true, and $mode is 'dark'.