Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

// Go Crazy! Mixins, Nesting, Variables, Ampersands

$line-height: 1.4;
$v-align: middle;

@mixin box-shape($size) {
    -webkit-box-sizing: $size;
       -moz-box-sizing: $size;
            box-sizing: $size;
}

@mixin shape($height: null, $width: null) {
  height: $height;
  width: $width;
}

@mixin font-size($font-size, $line-height: $line-height) {
  font-size: $font-size;
  line-height: $line-height;
}

@mixin h-align {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

*,
*:before,
*:after {
  @include box-shape(border-box);
}

.module {
  background-color: #CCFF99;
  @include h-align;
  @include box-shape(8px);
  padding: 1em 5%;
  @include shape(300px, 100%);
}

.no-js .module{
  border: 3px solid white;
  @include shape(294px, 394px);
}

.module h3 {
  background: #FFFFFF;
  @include box-shape(4px);
  @include font-size(2.4em);
  vertical-align: middle;
  @include shape(100%);
}

.btn {
  background-color: #FFFFFF;
  color: #CCFF99;
  @include h-align;
  @include font-size(1.2em, 1.4);
  vertical-align: $v-align;
}

SassMeister-output.css

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.module {
  background-color: #CCFF99;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-sizing: 8px;
  -moz-box-sizing: 8px;
  box-sizing: 8px;
  padding: 1em 5%;
  height: 300px;
  width: 100%;
}

.no-js .module {
  border: 3px solid white;
  height: 294px;
  width: 394px;
}

.module h3 {
  background: #FFFFFF;
  -webkit-box-sizing: 4px;
  -moz-box-sizing: 4px;
  box-sizing: 4px;
  font-size: 2.4em;
  line-height: 1.4;
  vertical-align: middle;
  height: 100%;
}

.btn {
  background-color: #FFFFFF;
  color: #CCFF99;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2em;
  line-height: 1.4;
  vertical-align: middle;
}