Basics of Mixins
Mixins are reusable blocks of CSS code in SCSS.
Instead of writing the same styles repeatedly, developers create a mixin once and reuse it anywhere.
Why Mixins Are Important?
- Reduce duplicate CSS
- Create reusable styles
- Keep code clean
- Improve maintainability
- Save development time
Mixin Syntax
Mixins are created using:
[code theme="dark"]
@mixin
[/code]
And used with:
[code theme="dark"]
@include
[/code]
Basic Mixin Example
[code theme="dark"]
@mixin flex-center{
display:flex;
justify-content:center;
align-items:center;
}
[/code]
Using the Mixin
[code theme="dark"]
.card{
@include flex-center;
}
[/code]
Compiled CSS
[code theme="dark"]
.card{
display:flex;
justify-content:center;
align-items:center;
}
[/code]
Why This is Useful?
Without mixins, the same Flexbox code would need to be written repeatedly.
Button Mixin Example
[code theme="dark"]
@mixin button-style{
padding:12px 20px;
border:none;
border-radius:8px;
cursor:pointer;
}
[/code]
Use Example
[code theme="dark"]
.primary-btn{
@include button-style;
background:blue;
}
.secondary-btn{
@include button-style;
background:gray;
}
[/code]
Mixin with Parameters
Mixins can accept dynamic values.
Example
[code theme="dark"]
@mixin button($bg-color){
background:$bg-color;
padding:12px 20px;
border-radius:8px;
}
[/code]
Use Example
[code theme="dark"]
.primary-btn{
@include button(blue);
}
.success-btn{
@include button(green);
}
[/code]
Compiled CSS
[code theme="dark"]
.primary-btn{
background:blue;
padding:12px 20px;
border-radius:8px;
}
.success-btn{
background:green;
padding:12px 20px;
border-radius:8px;
}
[/code]
Multiple Parameters
[code theme="dark"]
@mixin button($bg,$color){
background:$bg;
color:$color;
}
[/code]
Use Example
[code theme="dark"]
.primary-btn{
@include button(blue, white);
}
[/code]
Default Parameter Values
[code theme="dark"]
@mixin box($padding:20px){
padding:$padding;
}
[/code]
Use Example
[code theme="dark"]
.card{
@include box;
}
.modal{
@include box(40px);
}
[/code]
Responsive Mixin Example
[code theme="dark"]
@mixin mobile{
@media(max-width:768px){
@content;
}
}
[/code]
Use Example
[code theme="dark"]
.card{
width:400px;
@include mobile{
width:100%;
}
}
[/code]
Compiled CSS
[code theme="dark"]
.card{
width:400px;
}
@media(max-width:768px){
.card{
width:100%;
}
}
[/code]
Flexbox Utility Mixin
[code theme="dark"]
@mixin flex(
$justify:center,
$align:center
){
display:flex;
justify-content:$justify;
align-items:$align;
}
[/code]
Use Example
[code theme="dark"]
.navbar{
@include flex(space-between, center);
}
[/code]
Typography Mixin Example
[code theme="dark"]
@mixin heading($size){
font-size:$size;
font-weight:700;
line-height:1.2;
}
[/code]
Use Example
[code theme="dark"]
h1{
@include heading(48px);
}
[/code]
Animation Mixin Example
[code theme="dark"]
@mixin transition{
transition:all 0.3s ease;
}
[/code]
Use Example
[code theme="dark"]
.card{
@include transition;
}
[/code]
Mixin File Structure
Mixins are usually stored inside:
[code theme="dark"]
_mixins.scss
[/code]
Import Mixins
[code theme="dark"]
@use "abstracts/mixins";
[/code]
Use Imported Mixins
[code theme="dark"]
.card{
@include mixins.flex-center;
}
[/code]
Using "as *"
[code theme="dark"]
@use "abstracts/mixins" as *;
.card{
@include flex-center;
}
[/code]
Mixins vs Extend
|
Mixins
|
Extend
|
|
Reusable CSS block
|
Shares existing styles
|
|
Supports parameters
|
No parameters
|
|
More flexible
|
Simpler reuse
|
|
Generates repeated CSS
|
Merges selectors
|
Common Mixin Use Cases
- Flexbox utilities
- Buttons
- Typography
- Responsive breakpoints
- Animations
- Card styles
- Shadows
Common Problems
- Too many unnecessary mixins
- Duplicate mixins
- Overcomplicated parameters
- Huge mixin files
Best Practices
- Create reusable utility mixins
- Keep mixins simple
- Use parameters smartly
- Avoid very large mixins
- Store mixins in separate files
Quick Summary
- @mixin → Creates reusable styles
- @include → Uses the mixin
- Mixins support parameters
- Useful for Flexbox, buttons, typography, and responsiveness
- Improves maintainability and reduces duplicate CSS
Mixins are one of the most powerful SCSS features for creating reusable and scalable styling systems.