<div class="icons"> <p> <span>5</span><span>6</span><span>p</span> <span>6p</span> </p> </div> <div class="no-icons"> <p> <span>5</span><span>6</span><span>p</span> <span>6p</span> </p> <p> </div>
@mixin prefixify($style, $params) { -webkit-#{$style}: $params; -moz-#{$style}: $params; -ms-#{$style}: $params; -o-#{$style}: $params; #{$style}: $params; } @font-face { font-family: 'icon-negative-kerning'; src: url('http://joelgillman.com/assets/fonts/icon-negative-kerning.eot?#iefix') format('embedded-opentype'), url('http://joelgillman.com/assets/fonts/icon-negative-kerning.woff') format('woff'), url('http://joelgillman.com/assets/fonts/icon-negative-kerning.ttf') format('truetype'), url('http://joelgillman.com/assets/fonts/icon-negative-kerning.svg#svgFontName') format('svg'); } body { padding: 1em; background: hsl(0, 0%, 4%); font-size: 48px; text-align: center; text-rendering: optimizeLegibility; } span { &:nth-child(1) { color: Tomato; } &:nth-child(2) { color: OliveDrab; } &:nth-child(3) { color: SteelBlue; } &:nth-child(4) { color: Goldenrod; } } .icons p { font-family: icon-negative-kerning; } .no-icons p { font-family: monospace; } div { span { @include prefixify(transition, (all 0.8s ease)); } } div:hover { span { &:nth-child(1) { color: red; } &:nth-child(2) { color: green; } &:nth-child(3) { color: blue; } &:nth-child(4) { color: yellow; } } }