Generated by SassMeister.com.

SassMeister-input-HTML.haml

%h3
 %button 
  hi

SassMeister-input.scss

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

@mixin filters {
  $filter-list: black-white, brownie, cyan, juergen, kodachrome, light-blue, magenta, montmartre, no-filter, red, rose, sepia, technicolor, vintage-pinhole, violet, yellow;
  @each $filter in $filter-list {
    &.#{$filter} {
     background: image_url("design/photo_filters/#{$filter}.jpg");
     
  }
}
}
h3 {
@include filters
}

@mixin calc($prop, $val) {
  @each $pre in -webkit-, -moz-, -ms- {
    #{$prop}: $pre + calc(#{$val});
  }
  #{$prop}: calc(#{$val});
}

@mixin keyframe($animation) {
  $prelist: -webkit-, -moz-, -ms-;
  @each $pre in $prelist {
    #{$pre}: $pre + calc(#{$val});
  }
  #{$prop}: calc(#{$val});
}

@mixin placeholder {
    &::-webkit-input-placeholder { @content }
    &::-moz-placeholder { @content }
    &:-ms-input-placeholder { @content }
}
@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }
  @keyframes $animation-name {
    @content;
  }
}

@mixin animation($str) {
  $prelist: -webkit-, -moz-;
  @each $pre in $prelist {
  #{$pre}animation: #{$str};
  }
  animation: #{$str};
}


@include keyframes(slide-down) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}

div {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('slide-down 5s');
}
@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }
  @keyframes $animation-name {
    @content;
  }
}
@mixin animation($content) {
  $prelist: -webkit-, -moz-;
  @each $pre in $prelist {
  #{$pre}animation: #{$content};
  }
  animation: #{$content};
}
@include keyframes(fade-in) {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@include keyframes(fade-out) {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@include keyframes(fade-out-in) {
  0%,100 { opacity: 1; }
  50% { opacity: 0; }
}
@include keyframes(eventcard-in) {
  0%, 50% { height: 130px; padding-bottom: 0px;transform-origin: left top; }
  100% { height: 160px; padding-bottom: 20px; transform-origin: left top; }
}
@include keyframes(eventcard-out) {
  0% { height: 160px; padding-bottom: 20px; transform-origin: left top; }
  100%{ height: 130px; padding-bottom: 0px; transform-origin: left top; }
}
@include keyframes(collector-in) {
  0% { height: 0px; padding-top: 0; transform-origin: left top; }
  100%{ height: 60px; padding-top: 33px; transform-origin: left top; }
}
@include keyframes(collector-out) {
  100% { height: 0px; padding-top: 0; transform-origin: left top; }
  0%{ height: 60px; padding-top: 33px; transform-origin: left top; }
}
.upload-progress-text {
  @include animation('fade-out-in cubic-bezier(0.25,0.1,0.25,1) infinite');
}

@mixin range {
  $prefix-list: '-web-kit-','-moz-';
  @each $prefix in $prefix-list {
    &::#{$prefix}slider-thumb {
       background-color: #fff;
       border: solid 1px rgba(163,133,70,.4);
       border-radius: 40px;
       cursor: ew-resize;
       height: 40px;
       padding: 5px;
       width: 40px;
       
    }
  }
}
.toolset__slider--range {
  @include range;
}

SassMeister-output.css

h3.black-white {
  background: url('/images/design/photo_filters/black-white.jpg');
}
h3.brownie {
  background: url('/images/design/photo_filters/brownie.jpg');
}
h3.cyan {
  background: url('/images/design/photo_filters/cyan.jpg');
}
h3.juergen {
  background: url('/images/design/photo_filters/juergen.jpg');
}
h3.kodachrome {
  background: url('/images/design/photo_filters/kodachrome.jpg');
}
h3.light-blue {
  background: url('/images/design/photo_filters/light-blue.jpg');
}
h3.magenta {
  background: url('/images/design/photo_filters/magenta.jpg');
}
h3.montmartre {
  background: url('/images/design/photo_filters/montmartre.jpg');
}
h3.no-filter {
  background: url('/images/design/photo_filters/no-filter.jpg');
}
h3.red {
  background: url('/images/design/photo_filters/red.jpg');
}
h3.rose {
  background: url('/images/design/photo_filters/rose.jpg');
}
h3.sepia {
  background: url('/images/design/photo_filters/sepia.jpg');
}
h3.technicolor {
  background: url('/images/design/photo_filters/technicolor.jpg');
}
h3.vintage-pinhole {
  background: url('/images/design/photo_filters/vintage-pinhole.jpg');
}
h3.violet {
  background: url('/images/design/photo_filters/violet.jpg');
}
h3.yellow {
  background: url('/images/design/photo_filters/yellow.jpg');
}

@-webkit-keyframes slide-down {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }
}
@-moz-keyframes slide-down {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }
}
@keyframes slide-down {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }
}
div {
  width: 100px;
  height: 100px;
  background: black;
  -webkit-animation: slide-down 5s;
  -moz-animation: slide-down 5s;
  animation: slide-down 5s;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@-moz-keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fade-out-in {
  0%,100 {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
@-moz-keyframes fade-out-in {
  0%,100 {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
@keyframes fade-out-in {
  0%,100 {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
@-webkit-keyframes eventcard-in {
  0%, 50% {
    height: 130px;
    padding-bottom: 0px;
    transform-origin: left top;
  }

  100% {
    height: 160px;
    padding-bottom: 20px;
    transform-origin: left top;
  }
}
@-moz-keyframes eventcard-in {
  0%, 50% {
    height: 130px;
    padding-bottom: 0px;
    transform-origin: left top;
  }

  100% {
    height: 160px;
    padding-bottom: 20px;
    transform-origin: left top;
  }
}
@keyframes eventcard-in {
  0%, 50% {
    height: 130px;
    padding-bottom: 0px;
    transform-origin: left top;
  }

  100% {
    height: 160px;
    padding-bottom: 20px;
    transform-origin: left top;
  }
}
@-webkit-keyframes eventcard-out {
  0% {
    height: 160px;
    padding-bottom: 20px;
    transform-origin: left top;
  }

  100% {
    height: 130px;
    padding-bottom: 0px;
    transform-origin: left top;
  }
}
@-moz-keyframes eventcard-out {
  0% {
    height: 160px;
    padding-bottom: 20px;
    transform-origin: left top;
  }

  100% {
    height: 130px;
    padding-bottom: 0px;
    transform-origin: left top;
  }
}
@keyframes eventcard-out {
  0% {
    height: 160px;
    padding-bottom: 20px;
    transform-origin: left top;
  }

  100% {
    height: 130px;
    padding-bottom: 0px;
    transform-origin: left top;
  }
}
@-webkit-keyframes collector-in {
  0% {
    height: 0px;
    padding-top: 0;
    transform-origin: left top;
  }

  100% {
    height: 60px;
    padding-top: 33px;
    transform-origin: left top;
  }
}
@-moz-keyframes collector-in {
  0% {
    height: 0px;
    padding-top: 0;
    transform-origin: left top;
  }

  100% {
    height: 60px;
    padding-top: 33px;
    transform-origin: left top;
  }
}
@keyframes collector-in {
  0% {
    height: 0px;
    padding-top: 0;
    transform-origin: left top;
  }

  100% {
    height: 60px;
    padding-top: 33px;
    transform-origin: left top;
  }
}
@-webkit-keyframes collector-out {
  100% {
    height: 0px;
    padding-top: 0;
    transform-origin: left top;
  }

  0% {
    height: 60px;
    padding-top: 33px;
    transform-origin: left top;
  }
}
@-moz-keyframes collector-out {
  100% {
    height: 0px;
    padding-top: 0;
    transform-origin: left top;
  }

  0% {
    height: 60px;
    padding-top: 33px;
    transform-origin: left top;
  }
}
@keyframes collector-out {
  100% {
    height: 0px;
    padding-top: 0;
    transform-origin: left top;
  }

  0% {
    height: 60px;
    padding-top: 33px;
    transform-origin: left top;
  }
}
.upload-progress-text {
  -webkit-animation: fade-out-in cubic-bezier(0.25,0.1,0.25,1) infinite;
  -moz-animation: fade-out-in cubic-bezier(0.25,0.1,0.25,1) infinite;
  animation: fade-out-in cubic-bezier(0.25,0.1,0.25,1) infinite;
}

.toolset__slider--range::-web-kit-slider-thumb {
  background-color: #fff;
  border: solid 1px rgba(163, 133, 70, 0.4);
  border-radius: 40px;
  cursor: ew-resize;
  height: 40px;
  padding: 5px;
  width: 40px;
}
.toolset__slider--range::-moz-slider-thumb {
  background-color: #fff;
  border: solid 1px rgba(163, 133, 70, 0.4);
  border-radius: 40px;
  cursor: ew-resize;
  height: 40px;
  padding: 5px;
  width: 40px;
}

SassMeister-rendered.html

<h3>
  <button></button>
</h3>