Mixins and Selector Inheritance in SASS: When Should You Use One Or the Other?
February 12, 2013Tweet
Thinking back to when I first learned SASS, specifically of the .scss variety that I’m still most fond of, Mixins had to of been my first “aha moment”. They presented what appeared to be a perfect way to store related and reusable attributes for quick use. The approach, as taken by the SASS online tutorial and thus many first timers, was to use mixins as essentially variables for storing set of attributes (yes I know there are more to them but I’ll get to that in a moment).
@mixin random{
background: #ededed;
border: #232323 solid 2px;
}
h1{
font-size: 30px;
@include random;
}
p{
font-size: 4px;
@include random;
}
ul{
margin-left: 20px;
@include random;
}
.someclass{
color: #BADA55;
@include random;
}
When detractors of SASS complain about the language creating too much bulk in the css they often citing Mixins and specifically this use of Mixins. They are right.
h1 {
font-size: 30px;
background: #ededed;
border: #232323 solid 2px; }
font-size: 4px;
background: #ededed;
border: #232323 solid 2px; }ul {
margin-left: 20px;
background: #ededed;
border: #232323 solid 2px; }
.someclass {
color: #BADA55;
background: #ededed;
border: #232323 solid 2px; }
While using Mixins in this way may decrease bulk in your .scss or .sass files, they also create repeated patterns in your outputted CSS files that quickly bulk up your file size. The hard truth is that Mixins are not meant to be used in this way; or at least shouldn't. It's sad that the tutorial doesn't go any further than this use of Mixins but it doesn't.
There is also an odd absence of talk about Selector Inheritance in the tutorial as well. Selector Inheritance allows us to give one class the attributes of another.
.random{
background: #ededed;
border: #232323 solid 2px;
}
font-size: 30px;
@extend .random;
}p{
font-size: 4px;
@extend .random;
}
ul{
margin-left: 20px;
@extend .random;
}
.someclass{
color: #BADA55;
@extend .random;
}
On the surface the @extend property gives use the same functionality as the above use of Mixins, however, Selector Inheritance is void of the same bulk increasing issues as its Mixin cousin.
.random, h1, p, ul, .someclass {
background: #ededed;
border: #232323 solid 2px; }
font-size: 30px; }p {
font-size: 4px; }
ul {
margin-left: 20px; }
.someclass {
color: #BADA55; }
Selector Inheritance tells our compiler to add the EXTENDED class to a list of classes attatched to the EXTENDED class. In short we are telling our .scss to use CSS best practices with this approach.
Then what is the point of Mixins?
That one is easy.
Unlike Selector Inheritance, Mixins give us the option to pass parameters to them.
@mixin fontmargin($size){
font-size: $size;
line-height: 1.5;
margin-top : $size/4;
margin-bottom: $size - ($size/4)
}
@include fontmargin(30px);
}p{
@include fontmargin(16px);
}
Thus, as Compass has shown us time and time again, Mixins with parameters are a perfect way to collect reusable style patterns that can be passed different values for each occurence.
CSS, Pre-Processing, SASS, Web Design and Development
