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

Good SCSS structure practise to kicstart your project

0 votes
23 views
added Nov 3 in SASS by LC Marshal Second Warrant Officer (3,200 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 solution.

...