Variable arguments in mixins in SASS - Mini Project: Build & Apply

Using Variable Arguments in Sass Mixins

📖 Scenario: You are creating a style system for a website. You want to make a Sass mixin that can accept any number of padding values to apply to an CSS selector. This will help you reuse the padding styles easily.

🎯 Goal: Build a Sass mixin called set-padding that uses variable arguments to accept any number of padding values. Then apply this mixin to a CSS class with different padding values.

📋 What You'll Learn

Create a Sass mixin named set-padding that accepts variable arguments using $values....

Inside the mixin, use the variable arguments to set the padding property.

Create a CSS class called .box that uses the set-padding mixin with exactly four padding values: 10px, 15px, 20px, and 25px.

Ensure the Sass code compiles to valid CSS with the correct padding values.

💡 Why This Matters

🌍 Real World

Variable arguments in mixins help web developers write flexible and reusable styles that can adapt to different design needs without repeating code.

💼 Career

Understanding how to use variable arguments in Sass mixins is valuable for front-end developers working on scalable and maintainable CSS codebases.

1

Create the Sass mixin skeleton

Write a Sass mixin named set-padding that accepts variable arguments using $values.... Inside the mixin, set the padding property to $values.

SASS

# Your code here

Hint

Use $values... to accept any number of arguments in the mixin.

2

Create the CSS class to use the mixin

Create a CSS class called .box and inside it, include the set-padding mixin with the four padding values: 10px, 15px, 20px, and 25px.

SASS

@mixin set-padding($values...) {
  padding: $values;
}

.box {
  // Use the set-padding mixin here with 10px, 15px, 20px, 25px
  // Your code here
}

Hint

Use @include set-padding(10px, 15px, 20px, 25px); inside the .box class.

3

Add a second CSS class with different padding

Create another CSS class called .container and include the set-padding mixin with two padding values: 5rem and 2rem.

SASS

@mixin set-padding($values...) {
  padding: $values;
}

.box {
  @include set-padding(10px, 15px, 20px, 25px);
}

.container {
  // Use the set-padding mixin here with 5rem and 2rem
  // Your code here
}

Hint

Use @include set-padding(5rem, 2rem); inside the .container class.

4

Add a comment explaining the mixin usage

Add a comment above the @mixin set-padding line explaining that this mixin accepts variable padding values.

SASS

// Add a comment explaining the mixin usage
@mixin set-padding($values...) {
  padding: $values;
}

.box {
  @include set-padding(10px, 15px, 20px, 25px);
}

.container {
  @include set-padding(5rem, 2rem);
}

Hint

Write a comment starting with // above the mixin.