Mastering CSS with sass: leveraging the power of @each and @While for dynamic Styling

Hi folks,
Welcome again! I hope you are doing well. I am thrilled to see you here. So Today, we will discuss the use of @each and @while directive in Sass.

Introduction

Before going forward, let’s recap our previous blog Mastering CSS with Sass: Leveraging the Power of @for in Sass for Dynamic Styling: here and In this blog, we will look into the power of @each and @while directive in dynamic styling.

Introducing the @each Directive

@each in Sass provides a convenient way to iterate over lists or maps and generate CSS rules based on the values found within them. This is especially useful when you need to apply similar styles to a group of elements with slight variations. Let’s take a look at a practical example.

Suppose you have a list of colors you want to use for different website sections. Instead of writing repetitive CSS rules for each color, you can leverage the @each directive to generate these rules dynamically:

$section-colors: (
  header: #3498db,
  main: #e74c3c,
  footer: #2ecc71
);

@each $section, $color in $section-colors {
  .section-#{$section} {
    background-color: $color;
    color: lighten($color, 30%);
  }
}

In this above example, the @each directive iterates over the $section-colors map, generating CSS rules for each section with its corresponding color. The #{$section} syntax is used to interpolate the section name into the CSS class selector.

Harnessing the @while Directive

The @while directive enables you to create iterative loops in Sass stylesheets. This can be incredibly powerful when you need to generate styles based on specific conditions or dynamic values. Let’s explore a scenario where the @while proves its worth.

Imagine you want to create a set of CSS rules for increasing font sizes, starting from a base size and doubling it for each iteration. The @while directive can help you achieve this:

$base-font-size: 16px;
$font-sizes: ();

$i: 1;
@while $i <= 5 {
  $font-size: $base-font-size * $i;
  $font-sizes: append($font-sizes, $font-size);
  $i: $i + 1;
}

@each $size in $font-sizes {
  .font-size-#{$size} {
    font-size: $size;
  }
}

In this example, the @while directive is used to generate a set of font sizes by doubling the base font size with each iteration. The append() function adds each calculated font size to the $font-sizes list. Subsequently, the @each directive is employed to create CSS rules for each font size in the list.

Reoccurring UseCases

Creating Button Variants with @each

Imagine you’re building a website with different button styles and want to generate CSS rules for each button variant. Instead of manually writing out styles for each button, you can use the @each directive to automate the process:

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

@each $variant, $color in $button-variants {
  .btn-#{$variant} {
    background-color: $color;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: darken($color, 10%);
    }
  }
}

In this example, the @each directive generates button styles for each variant defined in the $button-variants map. This approach saves you from writing repetitive CSS rules and makes it easy to maintain consistent styling across different button types.

Building a Responsive Typography Scale with @while

Creating a responsive typography scale involves defining font sizes for different screen sizes. Let’s use the @while directive to generate a responsive typography scale with increasing font sizes:

$base-font-size: 16px;
$font-sizes: ();

$i: 1;
@while $i <= 6 {
  $font-size: $base-font-size * $i;
  $font-sizes: append($font-sizes, $font-size);
  $i: $i + 1;
}

body {
  font-size: $base-font-size;

  @each $size in $font-sizes {
    @media screen and (min-width: #{$size}px) {
      font-size: $size;
    }
  }
}

In this example, the @while directive generates a set of font sizes and the @each directive is used within a media query to apply responsive typography based on screen width. This approach allows for a smooth transition of font sizes as the screen size increases.

Conclusion

In conclusion, mastering the @each and @while directives in Sass empower you to create more efficient, maintainable, and flexible stylesheets. You can easily manage complex styling tasks and maintain a consistent visual identity throughout your web project by leveraging dynamic styling. So, dive into the world of Sass and take advantage of these powerful directives to enhance your CSS workflow. Your code will thank you!

Hey, let’s stay in touch!

If you liked this blog, please share it with your friends and colleagues. Connect with FE studio on LinkedIn to read more about such topics.