Are you first timer at lazacode.org? Why not join us and start exchange your programming knowledge with everyone. Register today!

Good SCSS structure practise to kicstart your project

0 votes
28 views
added Nov 3, 2017 in SCSS by LC Marshal Lieutenant (14,930 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>

Please log in or register to response this reference.

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