[SCSS] Reuse Styles with the SCSS @extend Directive

We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It depends. A better question is, how do they differ?
Extends:
change the source order, mixins don’t.
maintain relationships, mixins don’t.
share inherited traits, mixins don’t.
can extend multiple classes, mixins don’t.
can create multiple class declarations in the compiled CSS, mixins don’t.
can use the placeholder selector, mixins don’t.

Mixins:
can accept arguments, extends don’t.
can pass additional content, extends don’t.
repeat code when compiled, extends group class names together.
work well wIth media queries, extends have a limited interaction wIth media queries.

In this lesson we learn about writing reusable styles with the @extend directive and how it compares to the @mixin directive.

 

.base {
  color: red;

  &:hover {color: green}
  &::after {content: "?"}

  &-stuff {height: 5rem} // this will not be extended
}

.cool {height: 20rem}

.new {
  width: 20px;
  // extend multi classes
  @extend .base, .cool;
}

/*
 It is possible to use placeholder
*/

%base {
  color: red;
}

.new2 {
  @extend %base;
}

/*
  Placeholder for extend with mixin
*/
%hero {background: linear-gradient(red, white, black)}
%villain {background: darkred}

@mixin character($type: hero) {
  height: 20px;
  width: 20px;

  @extend %#{$type} // #{} --> output a string
}

.doc-ock {@include character(villain)}


/*
  Works with media query
*/
@media screen and (min-width: 800px) {
  %buddy { color: purple; }
}

@media screen and (min-width: 800px) {
  .buddy {
    @extend %buddy;
  }
}

 

Reference to http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_