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.

Practice

1. What is the main purpose of default parameter values in Sass mixins or functions?

easy

A. To force users to always pass arguments

B. To make the code run faster

C. To provide fallback values if no argument is given

D. To create new CSS properties automatically

Solution

1. Step 1: Understand default parameters

   Default parameters give a value when no argument is passed to a mixin or function.

2. Step 2: Identify the purpose

   This helps avoid errors and makes code flexible by using fallback values.

3. Final Answer:

   To provide fallback values if no argument is given -> Option C

4. Quick Check:

   Default parameters = fallback values [OK]

Hint: Defaults fill in missing arguments automatically [OK]

Common Mistakes:

• Thinking defaults speed up code
• Believing defaults force argument passing
• Confusing defaults with CSS property creation

2. Which of the following is the correct syntax to set a default parameter value in a Sass mixin?

easy

A. @mixin example($color = blue) { color: $color; }

B. @mixin example($color: blue) { color: $color; }

C. @mixin example($color ? blue) { color: $color; }

D. @mixin example($color <- blue) { color: $color; }

Solution

1. Step 1: Recall Sass default parameter syntax

   In Sass, default values use a colon ':' after the parameter name.

2. Step 2: Match syntax to options

   @mixin example($color: blue) { color: $color; } uses '$color: blue' which is correct syntax for default values.

3. Final Answer:

   @mixin example($color: blue) { color: $color; } -> Option B

4. Quick Check:

   Default value syntax uses ':' not '=' [OK]

Hint: Use colon ':' to assign default values in parameters [OK]

Common Mistakes:

• Using '=' instead of ':' for defaults
• Using '?' or '<-' which are invalid
• Confusing default syntax with other languages

3. Given the Sass mixin:

@mixin box($width: 100px, $height: 50px) { width: $width; height: $height; }

What CSS is generated by:

.small { @include box($height: 30px); }

medium

A. .small { width: 100px; height: 30px; }

B. .small { width: 30px; height: 30px; }

C. .small { width: 100px; height: 50px; }

D. .small { width: 30px; height: 50px; }

Solution

1. Step 1: Identify passed and default parameters

   The mixin call passes only $height: 30px, so $width uses default 100px.

2. Step 2: Write resulting CSS

   Width is 100px (default), height is 30px (passed value).

3. Final Answer:

   .small { width: 100px; height: 30px; } -> Option A

4. Quick Check:

   Passed overrides height, width uses default [OK]

Hint: Passed args override defaults, others stay default [OK]

Common Mistakes:

• Assuming all defaults are overridden
• Mixing up which parameter was passed
• Forgetting default applies if argument missing

4. What is wrong with this Sass mixin?

@mixin card($bg-color blue) { background-color: $bg-color; }

medium

A. Missing colon ':' between parameter and default value

B. Using '=' instead of ':' for default value

C. Parameter name cannot start with '$'

D. Mixin name cannot be 'card'

Solution

1. Step 1: Check parameter default syntax

   The parameter $bg-color is followed by 'blue' without a colon ':' separator.

2. Step 2: Identify correct syntax

   Default values require a colon ':' like '$bg-color: blue'.

3. Final Answer:

   Missing colon ':' between parameter and default value -> Option A

4. Quick Check:

   Default parameter syntax needs ':' [OK]

Hint: Default values need ':' after parameter name [OK]

Common Mistakes:

• Omitting colon ':' between parameter and value
• Using '=' instead of ':'
• Thinking parameter names can't start with '$'

5. You want a Sass function that returns a color, defaulting to red if no argument is given. Which function correctly uses default parameter values and returns the color?

hard

A. @function get-color($color = red) { @return $color; }

B. @function get-color($color: red) { return $color; }

C. @function get-color($color) { @return $color or red; }

D. @function get-color($color: red) { @return $color; }

Solution

1. Step 1: Check default parameter syntax in functions

   Default values use colon ':' like '$color: red'.

2. Step 2: Verify return statement syntax

   Sass uses '@return' to return values, not 'return'.

3. Step 3: Compare options

   @function get-color($color: red) { @return $color; } uses correct default and '@return'. @function get-color($color: red) { return $color; } uses 'return' which is invalid in Sass.

4. Final Answer:

   @function get-color($color: red) { @return $color; } -> Option D

5. Quick Check:

   Default param ':' and '@return' needed [OK]

Hint: Use ':' for defaults and '@return' to output value [OK]

Common Mistakes:

• Using '=' instead of ':' for defaults
• Using 'return' instead of '@return'
• Trying to use 'or' inside return statement