a {
  color: #333;
}

p.huge-module__paragraph {
  margin: 0;
  margin-bottom: 25px;
  color: #666;
  -webkit-font-smoothing: antialiased;
}

.huge-module__title {
  font-size: 30px;
  line-height: 30px;
  margin: 0 0 45px;
  font-weight: normal;
  color: #555;
  -webkit-font-smoothing: antialiased;
}

.huge-module__title--small {
  @extend .huge-module__title;
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 25px;
}

.huge-module__title--light {
  color: #bbb;
  text-transform: none;
  margin: 0;
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 25px;
  font-weight: normal;
}
%module__title {
  font-size: 30px;
  line-height: 30px;
  margin: 0 0 45px;
  font-weight: normal;
  color: #555;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #333;
}

p.huge-module__paragraph {
  margin: 0;
  margin-bottom: 25px;
  color: #666;
  -webkit-font-smoothing: antialiased;
}

.huge-module__title {
  @extend %module__title;

  &--small {
    @extend %module__title;
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 25px;
  }
}

.huge-module__title--light {
  color: #bbb;
  text-transform: none;
  margin: 0;
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 25px;
  font-weight: normal;
}
Use placeholder selectors instead of class selectors
Use placeholder selectors instead of class selectors

When we use class selectors as placeholder to insert new CSS properties through the @extend keyword, we create unnecessary duplicated class selectors in the output CSS, adding a lot of weight (specificity) to our selectors, making them hard to override.

It is recommended to user placeholders selectors instead so the output generated have single selectors without duplicated properties.

Check: http://thesassway.com/intermediate/understanding-placeholder-selectors
