Variable declaration with $ in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable named $primary-color with the value #3498db.

SASS

$primary-color: [1];

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

Acolor-primary

Bprimary-color

C#3498db

D3498db

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the # before the color code.

Using variable name as value.

Omitting the semicolon.

In Sass, variables start with a dollar sign $. To assign a color value, write $primary-color: #3498db;.

2fill in blank

medium

Complete the code to declare a variable $font-size with the value 1.5rem.

SASS

$font-size: [1];

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

A15px

B1.5rem

C1.5em

Drem1.5

Attempts:

3 left

💡 Hint

Common Mistakes

Using px instead of rem.

Writing units in wrong order like rem1.5.

Omitting units.

The correct way to assign a font size in rem units is 1.5rem.

3fill in blank

hard

Fix the error in the variable declaration to set $margin to 2rem.

SASS

$margin [1] 2rem;

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

A:

B=

C-

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using equal sign = instead of colon.

Omitting the colon.

Using semicolon instead of colon.

In Sass, variables are assigned using a colon :, not an equal sign.

4fill in blank

hard

Fill both blanks to declare $padding as 10px and $border-radius as 5px.

SASS

$padding: [1];
$border-radius: [2];

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

A10px

B5px

C15px

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the values for padding and border-radius.

Forgetting semicolons.

Using wrong units.

Assign 10px to $padding and 5px to $border-radius using colons and semicolons.

5fill in blank

hard

Fill all three blanks to declare variables $color, $font-weight, and $line-height with values #e74c3c, bold, and 1.6 respectively.

SASS

$color: [1];
$font-weight: [2];
$line-height: [3];

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

A#e74c3c

Bbold

C1.6

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around bold (not needed in Sass).

Forgetting the colon or semicolon.

Mixing up the order of values.

Assign the hex color #e74c3c to $color, the string bold to $font-weight, and the number 1.6 to $line-height.