Good SCSS structure practise to kicstart your project

0 votes
241 views
added Nov 3, 2017 in SCSS by LC Marshal Captain (25,790 points)

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>

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...