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;
}

Examples