In SASS, Mixin and Placeholder are really similar. They can hold combination of css properties and can be reused in many places, just like variables to help reduce our codes. However, they actually work differently behind the scene.
Mixin - It copies the mixin to the place where it is used.
Placeholder - It copies the selectors that use the placeholder to the place where the placeholder declared.
Let's see the following example:
We declared a mixin bananaColor, and a placeholder coffeeBackground.
They are used by the following classes:
.paragraph1 uses bananaColor.
.paragraph2 uses bananaColor and coffeeBackground.
.paragraph3 uses coffeeBackground.
SASS file:
@mixin bananaColor {
color: #f5c725;
font-weight: 600;
}
%coffeeBackground {
background-color: #b46427;
padding: 10px;
}
.paragraph1 {
font-size: 20px;
height: 100px;
@include bananaColor;
}
.paragraph2 {
font-size: 20px;
height: 100px;
@include bananaColor;
@extend %coffeeBackground
}
.paragraph3 {
font-size: 20px;
height: 100px;
@extend %coffeeBackground
}
Html File:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<p class="paragraph1">paragraph 1</p>
<p class="paragraph2">paragraph 2</p>
<p class="paragraph3">paragraph 3</p>
</div>
</body>
</html>
The result is like:
Let's compare how SASS compiles the code.
For Mixin, it copies the declared mixin properties to places where it is used.
For placeholders, it copies the selectors(.paragraph2, .paragraph3) to the placeholder where it is declared.
In conclusion, we can see Mixin and Placeholder are literally doing things reversely.
The logic of Mixin could be more intuitive and understandable than Placeholer. However, it may result in larger CSS code because it just copies the declared Mixin to everywhere, while Placeholder only copies the selectors.
Apart from that, Mixin can work like a function. We can also pass parameters into a Mixin, while we cannot use parameters on Placeholder.
Mixin and Placeholder can really help us organize and reduce our SASS code. We can choose to use either Mixin or Placeholder depending on our actual scenarios.
Latest comments (1)
Do placeholders work well for partial files? The reason I ask is what if the partial is consumed more than once? Then the code is duplicated. Would it be advisable or possible to organize all of them into the final SCSS file before @import or @use?