Default parameter values in SASS - Mini Project: Build & Apply

Using Default Parameter Values in Sass Mixins

📖 Scenario: You are creating a simple style for buttons on a website. You want to use a Sass mixin to style buttons with colors, but sometimes you want to use default colors if no specific colors are given.

🎯 Goal: Build a Sass mixin called button-style that uses default parameter values for $bg-color and $text-color. Then apply this mixin to two button classes: one uses default colors, and the other uses custom colors.

📋 What You'll Learn

Create a Sass mixin named button-style with two parameters: $bg-color defaulting to #3498db and $text-color defaulting to #ffffff.

Inside the mixin, set background-color to $bg-color and color to $text-color.

Create a CSS class .btn-default that uses the button-style mixin without passing any arguments.

Create a CSS class .btn-custom that uses the button-style mixin with $bg-color set to #e74c3c and $text-color set to #000000.

💡 Why This Matters

🌍 Real World

Using default parameters in Sass mixins helps developers create reusable and flexible styles for websites, saving time and reducing repeated code.

💼 Career

Front-end developers often use Sass to write maintainable CSS. Knowing how to use default parameters in mixins is a common skill required in web development jobs.

1

Create the button-style mixin with default parameters

Write a Sass mixin named button-style with two parameters: $bg-color defaulting to #3498db and $text-color defaulting to #ffffff. Inside the mixin, set background-color to $bg-color and color to $text-color.

SASS

// Your code here

Hint

Use @mixin to create a mixin. Set default values by using $param: value in the parameter list.

2

Create the .btn-default class using the mixin without arguments

Add a CSS class called .btn-default that includes the button-style mixin without passing any arguments.

SASS

@mixin button-style($bg-color: #3498db, $text-color: #ffffff) {
  background-color: $bg-color;
  color: $text-color;
}

// Your code here

Hint

Use @include button-style(); inside the .btn-default block to apply the mixin with default colors.

3

Create the .btn-custom class using the mixin with custom colors

Add a CSS class called .btn-custom that includes the button-style mixin with $bg-color set to #e74c3c and $text-color set to #000000.

SASS

@mixin button-style($bg-color: #3498db, $text-color: #ffffff) {
  background-color: $bg-color;
  color: $text-color;
}

.btn-default {
  @include button-style();
}

// Your code here

Hint

Pass the custom colors as arguments inside the parentheses when including the mixin.

4

Add a hover effect to both button classes

Add a :hover style for both .btn-default and .btn-custom classes that changes the opacity to 0.8.

SASS

@mixin button-style($bg-color: #3498db, $text-color: #ffffff) {
  background-color: $bg-color;
  color: $text-color;
}

.btn-default {
  @include button-style();
}

.btn-custom {
  @include button-style(#e74c3c, #000000);
}

// Your code here

Hint

Use &:hover inside each button class to add the hover effect.