Why advanced mixins solve complex problems in SASS - See It in Action

Why Advanced Mixins Solve Complex Problems

📖 Scenario: You are building a style system for a website that needs to handle different button styles with many variations like colors, sizes, and states. Writing separate CSS rules for each variation is hard and repetitive.Advanced mixins in Sass help by letting you write flexible, reusable style blocks that take parameters and create complex styles easily.

🎯 Goal: Create advanced Sass mixins that generate button styles with different colors and sizes, and apply them to HTML buttons to see the styles in action.

📋 What You'll Learn

Create a Sass map called $button-colors with keys primary, secondary, and danger and their respective color values.

Create a Sass map called $button-sizes with keys small, medium, and large and their respective padding and font-size values.

Write an advanced mixin called button-style that takes $color-name and $size-name as parameters and applies the correct color and size styles from the maps.

Use the button-style mixin to style three buttons with classes .btn-primary, .btn-secondary, and .btn-danger with size medium.

💡 Why This Matters

🌍 Real World

Web developers often need to style many UI elements with variations. Advanced mixins let them write less code and keep styles consistent across a site.

💼 Career

Knowing how to write advanced Sass mixins is valuable for front-end developers working on scalable, maintainable CSS in professional projects.

1

Create color and size maps

Create a Sass map called $button-colors with keys primary, secondary, and danger and values #007bff, #6c757d, and #dc3545 respectively. Also create a Sass map called $button-sizes with keys small, medium, and large and values as maps with padding and font-size pairs: small: 0.25rem 0.5rem, 0.875rem, medium: 0.375rem 0.75rem, 1rem, large: 0.5rem 1rem, 1.25rem.

SASS

// Create $button-colors and $button-sizes maps here
// Your code here

Need a hint?

Use Sass map syntax with parentheses and colons. Nest the padding and font-size inside the size map.

2

Create the advanced mixin

Create a mixin called button-style that takes two parameters: $color-name and $size-name. Inside the mixin, use map-get to get the color from $button-colors using $color-name. Also get the size map from $button-sizes using $size-name. Then set background-color to the color, padding to the size's padding, font-size to the size's font-size, and color to white. Add border-radius: 0.25rem and border: none.

SASS

$button-colors: (
  primary: #007bff,
  secondary: #6c757d,
  danger: #dc3545
);

$button-sizes: (
  small: (padding: 0.25rem 0.5rem, font-size: 0.875rem),
  medium: (padding: 0.375rem 0.75rem, font-size: 1rem),
  large: (padding: 0.5rem 1rem, font-size: 1.25rem)
);

// Create mixin button-style with parameters $color-name and $size-name
// Your code here

Need a hint?

Use @mixin to define the mixin. Use map-get to access map values. Set CSS properties inside the mixin.

3

Apply mixin to button classes

Create three CSS classes: .btn-primary, .btn-secondary, and .btn-danger. Inside each class, include the button-style mixin with the first parameter matching the color name (primary, secondary, danger) and the second parameter as medium.

SASS

$button-colors: (
  primary: #007bff,
  secondary: #6c757d,
  danger: #dc3545
);

$button-sizes: (
  small: (padding: 0.25rem 0.5rem, font-size: 0.875rem),
  medium: (padding: 0.375rem 0.75rem, font-size: 1rem),
  large: (padding: 0.5rem 1rem, font-size: 1.25rem)
);

@mixin button-style($color-name, $size-name) {
  $color: map-get($button-colors, $color-name);
  $size: map-get($button-sizes, $size-name);
  background-color: $color;
  padding: map-get($size, padding);
  font-size: map-get($size, font-size);
  color: white;
  border-radius: 0.25rem;
  border: none;
}

.btn-primary {
  // Include button-style mixin with primary and medium
  // Your code here
}

.btn-secondary {
  // Include button-style mixin with secondary and medium
  // Your code here
}

.btn-danger {
  // Include button-style mixin with danger and medium
  // Your code here
}

Need a hint?

Use @include inside each class to apply the mixin with correct parameters.

4

Add hover effect with advanced mixin logic

Update the button-style mixin to add a hover effect. Inside the mixin, after the existing styles, add a &:hover selector that changes the background-color to a darker shade. Use the darken function with the color and 10% as arguments.

SASS

$button-colors: (
  primary: #007bff,
  secondary: #6c757d,
  danger: #dc3545
);

$button-sizes: (
  small: (padding: 0.25rem 0.5rem, font-size: 0.875rem),
  medium: (padding: 0.375rem 0.75rem, font-size: 1rem),
  large: (padding: 0.5rem 1rem, font-size: 1.25rem)
);

@mixin button-style($color-name, $size-name) {
  $color: map-get($button-colors, $color-name);
  $size: map-get($button-sizes, $size-name);
  background-color: $color;
  padding: map-get($size, padding);
  font-size: map-get($size, font-size);
  color: white;
  border-radius: 0.25rem;
  border: none;

  // Add hover effect with darken function
  // Your code here
}

.btn-primary {
  @include button-style(primary, medium);
}

.btn-secondary {
  @include button-style(secondary, medium);
}

.btn-danger {
  @include button-style(danger, medium);
}

Need a hint?

Use &:hover inside the mixin and the darken function with 10% to make the hover color darker.