Variable interpolation with #{} in SASS - Mini Project: Build & Apply

Using Variable Interpolation with #{} in Sass

📖 Scenario: You are creating a simple style sheet for a website that has multiple button colors. You want to use Sass variables and variable interpolation to generate CSS classes dynamically.

🎯 Goal: Build a Sass file that uses variable interpolation with #{} to create CSS classes for buttons with different colors.

📋 What You'll Learn

Create a Sass list of color names

Create a variable for the CSS class prefix

Use a @each loop with variable interpolation #{} to generate CSS classes

Add a style rule inside each generated class to set the background color

💡 Why This Matters

🌍 Real World

Variable interpolation helps you write less repetitive CSS by generating classes dynamically, which is useful in theming and design systems.

💼 Career

Front-end developers use Sass and variable interpolation to maintain scalable and maintainable stylesheets in professional web projects.

1

Create a list of colors

Create a Sass list called $colors with these exact values: red, green, and blue.

SASS

# Create a list called $colors with red, green, and blue
# Your code here

Hint

Use parentheses or commas to create a list in Sass, like $list: (item1, item2);.

2

Create a class prefix variable

Create a variable called $btn-prefix and set it to the string btn.

SASS

$colors: (red, green, blue);
# Create a variable $btn-prefix and set it to 'btn'
# Your code here

Hint

Assign a string value to a variable like $var-name: 'value';.

3

Use @each loop with variable interpolation

Write an @each loop that iterates over $colors with the variable $color. Inside the loop, create a CSS class selector using variable interpolation with .#{$btn-prefix}-#{$color}.

SASS

$colors: (red, green, blue);
$btn-prefix: 'btn';
# Write an @each loop over $colors with $color
# Inside, create a class selector using .#{$btn-prefix}-#{$color}
# Your code here

Hint

Use @each $item in $list { ... } and inside use .#{$var} to insert variable values in selectors.

4

Add background color style inside each class

Inside the @each loop, add a CSS property background-color and set it to the current $color variable.

SASS

$colors: (red, green, blue);
$btn-prefix: 'btn';

@each $color in $colors {
  .#{$btn-prefix}-#{$color} {
    // Add background-color: $color;
  }
}

Hint

Inside the selector block, write background-color: $color; to apply the color.

Practice

1. What does the #{} syntax do in Sass?

easy

A. It defines a mixin.

B. It comments out a line of code.

C. It creates a new variable.

D. It inserts the value of a variable inside a string or selector.

Solution

1. Step 1: Understand the purpose of #{} in Sass

   The #{} syntax is used to insert or interpolate variables inside strings or selectors, making styles dynamic.

2. Step 2: Compare with other options

   Commenting, variable creation, and mixin definition use different syntax, so they are incorrect here.

3. Final Answer:

   It inserts the value of a variable inside a string or selector. -> Option D

4. Quick Check:

   #{variable} inserts variable value [OK]

Hint: Remember #{ } means insert variable value inside text [OK]

Common Mistakes:

• Thinking #{ } creates variables
• Confusing interpolation with comments
• Using #{ } to define mixins

2. Which of the following is the correct way to use variable interpolation in a selector in Sass?

easy

A. .button-#{$size} { color: blue; }

B. .button-$size { color: blue; }

C. .button-{$size} { color: blue; }

D. .button-#size { color: blue; }

Solution

1. Step 1: Identify correct interpolation syntax

   Variable interpolation requires #{} around the variable name to insert its value inside selectors.

2. Step 2: Check each option

   .button-#{$size} { color: blue; } uses .#{$size} correctly. Options A, C, and D miss the # or curly braces or both, so they are invalid.

3. Final Answer:

   .button-#{$size} { color: blue; } -> Option A

4. Quick Check:

   Use .class-#{$var} for interpolation [OK]

Hint: Use #{} around variables inside selectors [OK]

Common Mistakes:

• Omitting # in interpolation
• Omitting curly braces {}
• Using $ without interpolation

3. Given the Sass code:

$color: red;
$size: large;

.button-#{$size} {
  color: #{$color};
}

What CSS will this generate?

medium

A. .button-large { color: #{$color}; }

B. .button-#{$size} { color: #{$color}; }

C. .button-large { color: red; }

D. .button-$size { color: red; }

Solution

1. Step 1: Replace variables inside interpolation

   The variable $size is 'large', so .button-#{$size} becomes .button-large. The variable $color is 'red', so color: #{$color} becomes color: red.

2. Step 2: Write the final CSS output

   After interpolation, the CSS is .button-large { color: red; }.

3. Final Answer:

   .button-large { color: red; } -> Option C

4. Quick Check:

   Interpolation replaces variables with values [OK]

Hint: Replace #{} with variable values to get CSS output [OK]

Common Mistakes:

• Leaving interpolation syntax in output
• Not replacing variables correctly
• Confusing variable names with values

4. Identify the error in this Sass code:

$name: "header";

.#$name {
  font-weight: bold;
}

medium

A. Missing interpolation syntax #{ } around $name in selector

B. Variable $name is not defined

C. Font-weight property is invalid

D. Selector cannot start with a dot

Solution

1. Step 1: Check variable usage in selector

   The selector uses .$name but misses #{} for interpolation, so Sass treats it as a literal string, causing an error.

2. Step 2: Correct usage

   It should be .#{$name} to insert the variable value inside the selector.

3. Final Answer:

   Missing interpolation syntax #{ } around $name in selector -> Option A

4. Quick Check:

   Use .#{$var} to interpolate variables in selectors [OK]

Hint: Always wrap variables with #{ } inside selectors [OK]

Common Mistakes:

• Using $var without #{ } in selectors
• Assuming variables work without interpolation
• Confusing property errors with selector errors

5. You want to create CSS classes for button sizes dynamically using Sass variables:

$sizes: small, medium, large;

@each $size in $sizes {
  .btn-#{$size} {
    font-size: if($size == small, 1rem, if($size == medium, 1.5rem, 2rem));
  }
}

What will be the font-size for .btn-large in the generated CSS?

hard

A. 1rem

B. 2rem

C. 1.5rem

D. if($size == small, 1rem, if($size == medium, 1.5rem, 2rem))

Solution

1. Step 1: Understand the loop and condition

   The loop iterates over sizes: small, medium, large. For each, it creates a class with font-size based on the condition.

2. Step 2: Evaluate font-size for large

   For large, the condition $size == small is false, $size == medium is false, so it uses the else value 2rem.

3. Final Answer:

   2rem -> Option B

4. Quick Check:

   Conditional font-size for large = 2rem [OK]

Hint: Check nested if conditions carefully for each variable value [OK]

Common Mistakes:

• Assuming large equals small or medium
• Not evaluating nested if correctly
• Confusing variable interpolation with condition logic