What Are Mixins in SCSS?
Mixins in SCSS allow you to define reusable blocks of styles that can be included in multiple selectors. Think of them as functions in programming: you define a set of styles once, then reuse them wherever needed, often with customizable parameters. This reduces repetition, keeps your code DRY (Don’t Repeat Yourself), and makes maintenance a breeze.
A mixin is defined using the @mixin directive and included in your styles with the @include directive. Mixins can also accept parameters, making them flexible for different use cases.
Why Use Mixins?
Here’s why mixins are a must-have in your SCSS toolkit:
- Reusability: Write a style once and reuse it across your project.
- Consistency: Ensure uniform styling (e.g., button designs or typography) across components.
- Flexibility: Use parameters to customize styles without duplicating code.
- Easier Maintenance: Update a mixin in one place, and changes apply everywhere it’s used.
@mixin center-flex {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include center-flex;
height: 100vh;
}
.card {
@include center-flex;
width: 300px;
height: 200px;
}
In this example, the center-flex mixin applies flexbox centering to both .container and .card. Without the mixin, you’d repeat the same three properties, which can become cumbersome in larger projects.