Cacher is the code snippet organizer for pro developers

.wrapper {
  max-width: 700px;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  color: white;
}

.test h1, h2, h3 {
  color: blue;
}

/* mixin headings


*/
h1 {
  font-family: helvetica;
  color: silver;
  font-weight: bold;
  font-family: sans-serif;
}

h2 {
  font-family: helvetica;
  color: silver;
  font-weight: bold;
  font-family: sans-serif;
}

h3 {
  font-family: helvetica;
  color: silver;
  font-weight: bold;
  font-family: sans-serif;
}

.btn, button.btn, input[type="button"].btn, input[type="reset"].btn, input[type="submit"].btn {
  font-family: helvetica;
  color: silver;
  font-weight: bold;
  background-color: white;
  border: 1px solid silver;
  color: silver;
}

.btn:hover, input[type="button"].btn:hover, input[type="reset"].btn:hover, input[type="submit"].btn:hover, .btn:focus, input[type="button"].btn:focus, input[type="reset"].btn:focus, input[type="submit"].btn:focus {
  background-color: black;
  border: 1px solid white;
}

.btn, button.btn, input[type="button"].btn, input[type="reset"].btn, input[type="submit"].btn {
  padding: 9px 35px;
  display: inline-block;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: background-color 1.2s;
          transition: background-color 1.2s;
}

.btn > span, input[type="button"].btn > span, input[type="reset"].btn > span, input[type="submit"].btn > span {
  line-height: 1.8;
}

.btn--inline {
  vertical-align: baseline;
  font-size: inherit;
  line-height: inherit;
  height: auto;
  padding: .1em .5em;
}

.btn--small {
  font-size: 1em;
}

.btn--large {
  font-size: 2rem;
}

.btn--huge {
  font-size: 3rem;
}

.btn--full {
  width: 100%;
}

.btn--rounded {
  border-radius: 5rem;
}

/**
medium
xx-small
x-small|small
large
x-large
xx-large
smaller
larger

*/

> 1%
last 2 versions

<div class="wrapper">
  <h2>Buttons</h2>
  <p><a class="btn btn--small"><span>Click</span></a></p>
  <p><a class="btn btn--large"><span>Click</span></a></p>
  <p><a class="btn btn--huge"><span>Click</span></a></p>
  <p><a class="btn btn--huge btn--rounded"><span>Click</span></a></p>
  <p><a class="btn btn--huge btn--full"><span>Click</span></a></p>
  <p>
     
    Donec pede justo, fringilla vel, <a href="#" class="btn btn--inline">Click</a> aliquet nec, vulputate eget, arcu. Nunc sed turpis. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aenean imperdiet. Praesent egestas tristique nibh.   
  </p>
</div>

// ----
// libsass (v3.5.0.beta.2)
// ----

@import "bourbon/bourbon";

// ---------------------------------------------------
// SETTINGS
// ---------------------------------------------------

$button-sizes: () !default;
$button-shapes: () !default;

$btn-settings :(
  $button-sizes,
  $button-shapes
) !default;


// ---------------------------------------------------
// TOOLS
// ---------------------------------------------------
// function headings
// 
// Setup the function in your functions or helpers files, wherever you keep these bits.
@function headings($from:1, $to:6) {
    @if $from == $to {
        @return 'h#{$from}';
    } @else {
        @return 'h#{$from},' + headings($from+1, $to);
    }
}





// ---------------------------------------------------
// USAGE
// ---------------------------------------------------

.wrapper {
  max-width: 700px;
  margin: 0 auto;
}

// function headings
// 
// Setup the function in your functions or helpers files, wherever you keep these bits.
@function headings($from:1, $to:6) {
    @if $from == $to {
        @return 'h#{$from}';
    } @else {
        @return 'h#{$from},' + headings($from+1, $to);
    }
}

$all-headings: headings(1,6);


#{$all-headings} {
  color: white;
}

// si on utilise ainsi seul le h1 est associé a la classe .test
.test #{headings(1,3)}{
  color: blue;
}

/* mixin headings


*/
@mixin headings($from: 1, $to: 6){
    @for $i from $from through $to{
      h#{$i}{
        @content
      }
    }
}
$heading-font-family: helvetica !default;
$brand-color-primary: silver !default;
@mixin base-heading-styles(){
    font-family: $heading-font-family;
    color: $brand-color-primary;
    font-weight: bold;
}

@include headings(1,3){
    @include base-heading-styles();
    font-family:sans-serif;
}


// -------------------------------------------------
// 
// -------------------------------------------------
%btn-theme {
  @include base-heading-styles;
  background-color: white;
  border: 1px solid silver;

  color: silver;

    
  &:hover,
  &:focus{
    background-color: black;
    border: 1px solid white;
  }
}

.btn{
    @extend %btn-theme;
    padding: 9px 35px;
    display:inline-block;
    
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    white-space:nowrap;
    cursor: pointer;
    
    transition: background-color 1.2s;

    & > span {
        line-height: 1.8;
    }
}
.btn--inline {
    vertical-align: baseline;
    font-size: inherit;
    line-height: inherit;
    height: auto;
    padding: .1em .5em;
}

.btn--small {
  font-size: 1em;
  //line-height: 1.5;
  //height: 40px;
}

.btn--large {
  font-size: 2rem;
}

.btn--huge {
  font-size: 3rem;
}

.btn--full{
  width: 100%;
}

.btn--rounded{
    border-radius: 5rem;
}
/**
medium
xx-small
x-small|small
large
x-large
xx-large
smaller
larger

*/

#{$all-buttons}{
  
  &.btn{
    @extend .btn;
  }
}

div.wrapper
  h2 Buttons
  p
    a.btn.btn--small
      span Click
  p
    a.btn.btn--large
      span Click
  p
    a.btn.btn--huge
      span Click
  p
    a.btn.btn--huge.btn--rounded
      span Click
  p
    a.btn.btn--huge.btn--full
      span Click
  p 
    | Donec pede justo, fringilla vel, <a href="#" class="btn btn--inline">Click</a> aliquet nec, vulputate eget, arcu. Nunc sed turpis. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aenean imperdiet. Praesent egestas tristique nibh.