Control directives in Sass (Syntactically Awesome Style Sheets) provide powerful tools for implementing logic and dynamic behavior in your stylesheets. The primary control directives include @if, @else, @for, @each, and @while. Below are some common use cases for these directives, along with sample code to illustrate their applications.

1. Conditional Styles with @if

The @if directive is commonly used to apply styles conditionally based on variables or other conditions. This is particularly useful for theming and responsive design.

$theme: dark; /* Change this variable to 'light' to see the effect */

.button {
    @if $theme == light {
        background-color: #3498db; /* Light theme color */
        color: white;
    } @else {
        background-color: #2c3e50; /* Dark theme color */
        color: white;
    }
}
    

In this example, the button's background color changes based on the value of the $theme variable, allowing for easy theme management.

2. Looping Through Lists with @each

The @each directive is useful for iterating over lists or maps to generate styles dynamically. This is particularly helpful for creating utility classes or applying styles to multiple elements.

$colors: (red, green, blue);

@each $color in $colors {
    .bg-#{$color} {
        background-color: $color; /* Generates classes for each color */
    }
}
    

This example generates three classes (.bg-red, .bg-green, .bg-blue) with corresponding background colors, making it easy to apply consistent styles across different elements.

3. Generating Responsive Styles with @for

The @for directive can be used to create responsive styles by generating classes based on a range of values. This is useful for creating grid systems or responsive typography.

@for $i from 1 through 5 {
    .col-#{$i} {
        width: 20% * $i; /* Generates classes with increasing widths */
    }
}
    

In this example, the @for loop generates classes (.col-1, .col-2, etc.) with widths that increase by 20% for each iteration, allowing for a flexible grid layout.

4. Conditional Logic in Loops

Combining control directives allows for more complex logic. For example, you can use @if within a loop to apply different styles based on conditions.

$breakpoints: (small: 480px, medium: 768px, large: 1024px);

@each $size, $value in $breakpoints {
    @if $size == small {
        .container {
            max-width: $value; /* Apply specific styles for small screens */
        }
    } @else {
        .container {
            max-width: $value; /* Apply styles for larger screens */
        }
    }
}
    

This example demonstrates how to apply different styles to a container based on the screen size defined in the $breakpoints map.

5. Creating Dynamic Classes with @while

The @while directive is useful for scenarios where the number of iterations is not predetermined. This can be helpful for generating classes based on dynamic conditions.

$i: 1;

@while $i <= 5 {
    .item-#{$i} {
        width: 20px * $i; /* Generates classes with increasing widths */
    }
    $i: $i + 1; /* Increment the counter */
}
    

In this example, the @while loop generates classes (.item-1, .item-2, etc.) with widths that increase based on the counter, allowing for dynamic styling based on conditions.

6. Conclusion

Control directives in Sass provide powerful tools for implementing logic and dynamic behavior in your stylesheets. By using directives like @if, @each, @for, and @while, developers can create more maintainable and flexible styles that adapt to various conditions and requirements. Understanding these use cases can significantly enhance your Sass development process, allowing for cleaner code and improved responsiveness in your web designs.