Control flow in Sass allows for conditional execution of code and repetition of code blocks, making your CSS more dynamic and efficient. Sass introduces directives such as @if, @else if, @else, @for, @each, and @while that add conditional logic and loops to your stylesheets.

Conditional Statements

Sass allows the use of conditional statements, making it easier to apply styles based on certain conditions.

@if Directive

The @if directive allows you to apply styles conditionally:

scss

@else if and @else Directives

To handle multiple conditions, you can use @else if and @else:

scss

Loops in Sass

Loops allow for repeating blocks of code, which is useful for dynamically generating styles based on a set of data.

@for Directive

The @for directive executes a block of code a specific number of times. There are two ways to use @for: from(arbitrary) through(exclusive) and from(include) through(include).

Example with from...through:

scss

Result in CSS:

css

@each Directive

The @each directive allows iteration over lists or maps, which is especially useful for managing related sets of data.

Example with List:

scss

Result in CSS:

css

Example with Map:

scss

Result in CSS:

css

@while Directive

The @while directive executes a block of code while a condition is true:

scss

Result in CSS:

css

Complete Example

Combining control flow and loops allows for creating dynamic and sophisticated styles. Here is a complete example using several of these directives:

scss

Conclusion

Control flow in Sass allows you to introduce conditional logic and loops into your stylesheets, providing an additional level of flexibility and dynamism. With these powerful tools, you can create more efficient and maintainable CSS. In the next chapter, we will explore color management in Sass and how you can manipulate and optimize colors in your stylesheets.