Sass Sticky Footer Mixin

sass-sticky-footer.css

/**
 * the sticky footer mixin
 **/
/**
 * the sticky footer implementation
 **/
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:300);
html, body {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
}

#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -30px;
}
#wrapper #container {
  padding: 0 0 30px 0;
}

#footer {
  height: 30px;
}

/**
 * other styling just to make the demo more appealing
 **/
html, body, #wrapper, #container, #footer {
  width: 100%;
}

#wrapper {
  background: #F3F3F3;
}

p {
  margin: 0;
  padding: 5% 0 0;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 2.5em;
  color: #555;
  letter-spacing: 0.05em;
  text-align: center;
}

#footer {
  background: #F7A9B9;
}

sass-sticky-footer.html

<div id="wrapper">
  <div id="container">
    <p>Clean Sticky Footer SCSS Mixin</p>
  </div>
</div>
<div id="footer"></div>

sass-sticky-footer.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

/**
 * the sticky footer mixin
 **/
@mixin sticky-footer($footer-height, $wrapper-selector: unquote("#wrapper"), $container-selector: unquote("#container"), $footer-selector: unquote("#footer")) {
  html, body {
    height: 100%;
  }
  body {
  	margin: 0px;
  	padding: 0px;
  }
  #{$wrapper-selector} {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -$footer-height;
    #{$container-selector} {
      padding: 0 0 $footer-height 0;
    } 
  }
  #{$footer-selector} {
    height: $footer-height; 
  }
}

/**
 * the sticky footer implementation
 **/
@include sticky-footer(30px);

/**
 * other styling just to make the demo more appealing
 **/
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:300);

html,body,#wrapper,#container,#footer {
  width:100%;
}
#wrapper {
  background: #F3F3F3;
}
p {
  margin: 0;
  padding: 5% 0 0;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 2.5em;
  color: #555;
  letter-spacing: 0.05em;
  text-align: center;
}
#footer {
  background: #F7A9B9;
}