Functions vs mixins comparison in SASS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a simple Sass function that returns a color.

SASS

@function get-primary-color() {
  @return [1];
}

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

Aprimary

B#3498db

Ccolor

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a variable name instead of a color value.

Using a color name without quotes or hash.

The function should return a valid color value like a hex code. '#3498db' is a valid hex color.

2fill in blank

medium

Complete the code to include a mixin that sets the background color.

SASS

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

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

Abg-color

Bcolor

Cbackground

D$color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the property name instead of the variable.

Omitting the $ sign before the variable.

The mixin uses the parameter $color to set the background-color property.

3fill in blank

hard

Fix the error in the function that tries to add two numbers.

SASS

@function add($a, $b) {
  @return $a [1] $b;
}

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

A*

B-

C+

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong operator like - or * instead of +.

Leaving out the operator entirely.

To add two numbers, use the + operator between the variables.

4fill in blank

hard

Fill both blanks to create a map of colors and use a function to get a color by key.

SASS

$colors: (primary: #3498db, secondary: #2ecc71);
@function get-color($key) {
  @return map-[1]($colors, $[2]);
}

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

Aget

Bkey

Cvalue

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using map-key or map-value instead of map-get.

Using the wrong variable name without $.

The map-get function retrieves a value by key from a map. The parameter is the key variable $key.

5fill in blank

hard

Fill all three blanks to create a mixin that sets font size and color using parameters.

SASS

@mixin text-style($size, $color) {
  font-size: [1];
  color: [2];
  font-weight: [3];
}

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

A$size

B$color

Cbold

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed values instead of parameters for font-size or color.

Using variable names without $ sign.

Setting font-weight to a variable instead of a fixed value.

The mixin uses $size and $color parameters for font-size and color. Font-weight is set to 'bold' as a fixed value.