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.

Practice

1. What symbol is used to declare a variable in Sass?

easy

A. $

B. #

C. @

D. %

Solution

1. Step 1: Recall Sass variable syntax

   In Sass, variables always start with the $ symbol to distinguish them from other values.

2. Step 2: Identify the correct symbol

   Among the options, only $ is used for variables in Sass.

3. Final Answer:

   $ -> Option A

4. Quick Check:

   Variables start with $ in Sass [OK]

Hint: Remember: Sass variables always begin with $ [OK]

Common Mistakes:

• Using # or @ instead of $ for variables
• Confusing CSS IDs (#) with Sass variables
• Omitting the $ symbol before variable names

2. Which of the following is the correct way to declare a color variable in Sass?

easy

A. main-color: $3498db;

B. $main-color: #3498db;

C. $main-color = #3498db;

D. @main-color: #3498db;

Solution

1. Step 1: Check variable declaration syntax

   Sass variables start with $, followed by the name, a colon, then the value, ending with a semicolon.

2. Step 2: Compare options

   $main-color: #3498db; matches the correct syntax: $main-color: #3498db;. Others use wrong symbols or order.

3. Final Answer:

   $main-color: #3498db; -> Option B

4. Quick Check:

   Variable declaration uses $name: value; [OK]

Hint: Use $name: value; to declare variables in Sass [OK]

Common Mistakes:

• Using = instead of : to assign values
• Placing $ after the variable name
• Using @ instead of $ for variables

3. What will be the background color of the button in this Sass code?

$btn-bg: #ff0000;
button {
  background-color: $btn-bg;
}

medium

A. Blue

B. Green

C. Red

D. No color (default)

Solution

1. Step 1: Identify the variable value

   The variable $btn-bg is assigned the color #ff0000, which is red.

2. Step 2: Check usage in button style

   The button's background-color uses $btn-bg, so it will be red.

3. Final Answer:

   Red -> Option C

4. Quick Check:

   $btn-bg = #ff0000 (red) [OK]

Hint: Match variable value to color code to find output [OK]

Common Mistakes:

• Confusing hex color codes with color names
• Forgetting to use $ before variable name
• Assuming default color if variable is used

4. Identify the error in this Sass variable declaration:

$font-size 16px;

medium

A. Variable name should not start with $

B. Semicolon is missing at the end

C. Value should be in quotes

D. Missing colon between variable name and value

Solution

1. Step 1: Review correct variable syntax

   Sass variables require a colon : between the name and value, like $font-size: 16px;.

2. Step 2: Identify missing colon

   The code misses the colon, causing a syntax error.

3. Final Answer:

   Missing colon between variable name and value -> Option D

4. Quick Check:

   Variable declaration needs colon : [OK]

Hint: Check for colon : after variable name [OK]

Common Mistakes:

• Omitting colon between name and value
• Using = instead of :
• Forgetting semicolon at end (less critical)

5. You want to create a Sass variable for spacing that changes based on screen size. Which is the best way to declare and use it?

$spacing: 1rem;

@media (min-width: 600px) {
  $spacing: 2rem;
}

.container {
  padding: $spacing;
}

hard

A. Variables cannot be redefined inside media queries

B. This works; $spacing changes inside media query

C. Use !default to change variable inside media query

D. Declare two variables and use @if to switch

Solution

1. Step 1: Understand Sass variable scope

   Sass variables are static and cannot change inside media queries because media queries are CSS rules, not Sass logic blocks.

2. Step 2: Evaluate the code behavior

   Redefining $spacing inside @media does not work; Sass processes variables before CSS is generated.

3. Step 3: Correct approach

   To handle responsive spacing, declare separate variables or use mixins/functions with media queries.

4. Final Answer:

   Variables cannot be redefined inside media queries -> Option A

5. Quick Check:

   Sass variables are static, not dynamic in media queries [OK]

Hint: Sass variables are static; media queries can't change them [OK]

Common Mistakes:

• Trying to redefine variables inside media queries
• Assuming Sass variables behave like CSS custom properties
• Not using separate variables or mixins for responsiveness