@each loop over maps in SASS - Mini Project: Build & Apply

@each Loop Over Maps in Sass

📖 Scenario: You are designing a simple website theme. You want to create CSS classes for different button colors using Sass. Each button color has a name and a hex color code.

🎯 Goal: Build a Sass stylesheet that uses an @each loop to create CSS classes for buttons with background colors from a map.

📋 What You'll Learn

Create a Sass map called $button-colors with three entries: primary with #3498db, secondary with #2ecc71, and danger with #e74c3c.

Create a variable $padding set to 1rem.

Use an @each loop to generate CSS classes named .btn-primary, .btn-secondary, and .btn-danger with the correct background colors and padding.

Add a final style rule for .btn that sets the text color to white and border radius to 0.25rem.

💡 Why This Matters

🌍 Real World

Using Sass maps and loops helps you write less code and keep your styles consistent when designing websites with multiple color themes.

💼 Career

Front-end developers often use Sass to manage complex styles efficiently, especially when working on large projects with many design variations.

1

Create the $button-colors map

Create a Sass map called $button-colors with these exact entries: primary: #3498db, secondary: #2ecc71, and danger: #e74c3c.

SASS

// Create the $button-colors map with the specified entries
// Your code here

Hint

Use parentheses ( ) to define a map in Sass. Separate entries with commas.

2

Add the $padding variable

Create a variable called $padding and set it to 1rem.

SASS

$button-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

// Create the $padding variable and set it to 1rem
// Your code here

Hint

Variables in Sass start with $. Assign values with a colon and end with a semicolon.

3

Use @each loop to create button classes

Write an @each loop that iterates over $button-colors with variables $name and $color. Inside the loop, create CSS classes named .btn-#{$name} with background-color: $color and padding: $padding.

SASS

$button-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

$padding: 1rem;

// Use @each loop to create button classes
// Your code here

Hint

Use @each $name, $color in $button-colors { ... } to loop over map entries. Use interpolation #{$name} to build class names.

4

Add the base .btn style

Add a CSS rule for the class .btn that sets color to white and border-radius to 0.25rem.

SASS

$button-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

$padding: 1rem;

@each $name, $color in $button-colors {
  .btn-#{$name} {
    background-color: $color;
    padding: $padding;
  }
}

// Add .btn base style here
// Your code here

Hint

Write a normal CSS rule for .btn with the specified properties.