Generated by SassMeister.com.

SassMeister-input-HTML.haml

%h1 mobilewebdeveloper.me!

SassMeister-input.scss

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

@function MakeColor ($color) {
    @return $color + #010;
  }
  
@mixin textFormat($size, $family, $color) {
    font: {
      size: $size;
      family: $family;
    };
    color: MakeColor($color);
  }

.block {
  color: orange;
}

.foo {
  @include textFormat(12px, verdana, red);
  @extend .block;
  font-size: 12px;
  padding: 10px;
  width: 50%;
  .nested-foo {
    background-color: green;
  }
  
} 
  

SassMeister-output.css

.block, .foo {
  color: orange;
}

.foo {
  font-size: 12px;
  font-family: verdana;
  color: #ff1100;
  font-size: 12px;
  padding: 10px;
  width: 50%;
}
.foo .nested-foo {
  background-color: green;
}

SassMeister-rendered.html

<h1>mobilewebdeveloper.me!</h1>