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