Complex Mixins

Declaration

@mixin header {

  $sass-color: #da4991;

  @content;

  @include awesome-color;

  line-height: 1.2;

  margin: .3em 0;



  a {

    color: $sass-color;

    text-decoration: none;

    transition: all .2s ease-in-out;



    &:hover {

      background-color: $sass-color;

      color: #ffffff;

    }

  }

}

Application

h1, h2, h3, h4, h5, h6 {

  @include header;

}

.pseudo-header {

  @include header {

    border-bottom: 1px solid gray;

    font-size: .8em;

    padding-bottom: .3em;

  }

}

Output

h1, h2, h3, h4, h5, h6 {
  color: #0606e8;
  line-height: 1.2;
  margin: .3em 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #da4991;
  text-decoration: none;
  transition: all .2s ease-in-out;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  background-color: #da4991;
  color: #ffffff;
}

.pseudo-header {
  border-bottom: 1px solid gray;
  font-size: .8em;
  padding-bottom: .3em;
  color: #0606e8;
  line-height: 1.2;
  margin: .3em 0;
}

.pseudo-header a {
  color: #da4991;
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.pseudo-header a:hover {
  background-color: #da4991;
  color: #ffffff;
}