Html <kbd> Keyboard styling scss

KBD-Styling.html

<h1>KBD Styling</h1>
<h2>White Keyboard</h2>
<div class="kbd-white">
  <kbd>A</kbd>+<kbd>B</kbd>+<kbd>C</kbd>
</div>
<h2>Dark Keyboard</h2>
<div class="kbd-dark">
  <kbd>A</kbd>+<kbd>B</kbd>+<kbd>C</kbd>+<kbd class="meta"></kbd>
</div>
<h2>Dark Keyboard Glossy</h2>
<div class="kbd-dark-glossy">
  <kbd>A</kbd>+<kbd>B</kbd>+<kbd>C</kbd>
</div>

KBD-Styling.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Normalize SCSS (v3.0.0.alpha.2)
// ----

/* # Keyboard styles <kbd>

Use it in your styles

Character reference
[on line character converter](http://www.evotech.net/articles/testjsentities.html)
<http://www.yourhtmlsource.com/text/specialcharacters.html>

\ Hex CSS value\ Html | description |
| `\2318` | `&#8984;` | Meta Apple, looped Square |


~~~
kbd {
  @extend %kbd;
  @extend %kbd-white|%kbd-dark|%kbd-dark-glossy ;
}
~~~

Markup:
<h1>KBD Styling</h1>
<h2>White Keyboard</h2>
<div class="kbd-white">
  <kbd>A</kbd>+<kbd>B</kbd>+<kbd>C</kbd>
</div>
<h2>Dark Keyboard</h2>
<div class="kbd-dark">
    <kbd>A</kbd>+<kbd>B</kbd>+<kbd>C</kbd>
</div>
<h2>Dark Keyboard Glossy</h2>
<div class="kbd-dark-glossy">
  <kbd>A</kbd><kbd>+</kbd><kbd>B</kbd><kbd>+</kbd><kbd>C</kbd>
</div>

@import       - Compass
%placeholder  - %kbd
%placeholder  - %kbd-white
%placeholder  - %kbd-dark
%placeholder  - %kbd-dark-glossy

Compatibility untested lol

Styleguide typo.body-copy
*/
// --------------------------------------------
// Use @import
// --------------------------------------------
@import "compass";
@import "normalize-scss";

// --------------------------------------------
// $variables
// --------------------------------------------
$sans-font-family: Arial,Helvetica,sans-serif;
// --------------------------------------------
// %placehoders
// --------------------------------------------
%gradient-black {
    background-color: #4c4c4c; // Old browsers
    @include filter-gradient(#4c4c4c, #131313, vertical); // IE6-8
    // IE9 SVG, needs conditional override of 'filter' to 'none'
    $experimental-support-for-svg: true;
    @include background-image(linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%));
}
%kbd{
    @include single-box-shadow(0,2px,3px,silver,false);
    @include border-radius(3px);
    
    display:inline-block;
    margin:0 .1em;
    padding:.1em .6em;

    font-family:$sans-font-family;
    font-size:11px;
    line-height:1.4;
} 
%kbd-white {
    @include text-shadow(0 1px 0 #fff);
        
    background-color:#f7f7f7;
    border:1px solid #ccc;
    color:#333;
}
%kbd-dark {
    @include text-shadow(0 2px 0 #010101);
    
    background-color: #2f2e2e;
    border: 1px solid #2b2626;
    color: #f8f5f5;
}
%kbd-dark-glossy {
  @extend %kbd; 
  @extend %gradient-black;
  color: #f8f5f5;
}
// --------------------------------------------
// Exemple use & test
// --------------------------------------------
.kbd-white{
  & kbd {
    @extend %kbd;
    @extend %kbd-white;
  }
}
.kbd-dark{
  & kbd {
    @extend %kbd;
    @extend %kbd-dark;
  }
}
.kbd-dark-glossy{
  & kbd {
    @extend %kbd;
    @extend %kbd-dark-glossy;
  }
}

.meta:before {
  content:'\2318';
}