The example case to be used is for icons style properties.
The following class describes the differentiation of style properties between classes.
- Block icons
- Icon that has border-radius
- Big icon
- Icon that has a brand color
Code
.icon {
&-block {
display: block;
}
&-lg {
font-size: 2.5em;
}
&-radius {
border-radius: 50%;
border: 1px solid $grey;
padding: 12px;
}
&-brand {
border-color: $brand_color;
&:before {
color: $brand_color;
}
}
}
Normal practise
<div class="col-md-4 text-center">
<span class="icon-block icon-lg icon-radius icon-brand ion-thumbsup"></span>Regulated
</div>
Better practise
Instead of calling each of classes individually, you can combined all classes for better architecture and optimization with the following methods
.icon-sidebar {
@extend .icon-block;
@extend .icon-lg;
@extend .icon-radius;
@extend .icon-brand;
}
The combined classes has a new class!
<div class="col-md-4 text-center">
<span class="icon-sidebar ion-thumbsup"></span>Regulated
</div>
