Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Thanks for taking a look!</h1>
<h2>Hi there</h2>
<div class="btn"></div>

SassMeister-input.scss

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

@mixin font($font-size: 16px, $line-height: 24px, $font-family: Arial) {
  //$font: #{$font-size}/#{$line-height} $font-family;
  $font: #{$font-size}/#{$line-height} $font-family + " sans-serif";
  //font: $font-size/$line-height;
  //$font: (16px/24px) $font-family;
  font: $font;
  &:before {
    @if(type-of($font) == string) {
      content: 'My font property is: #{$font}.';
    } @else {
      content: 'Sorry, the variable #{$font} is a #{type-of($font)}';
    }
  }
}

h4 {
  @include font;
}



// Example-1

@function em-to-px($target, $context: 16px){
  @return ($target / $context) * 1em;
}

// Example-2
@mixin ps-after($width, $width-value, $border-color: #BEEB9F) {
  &:after {
    content: '☺';     
    $random-width: random($width-value) * 1%;
    #{$width}: $random-width;
    height: $random-width;   
    $border-width: floor( ($random-width / 10%) * 1px ) + 1px; 
    border: $border-width solid $border-color;         
    display: block;
    margin: 0 auto;
    color: #FF6138; 
  }
}

// Example-3
$list: "tomato", "lime", "lightblue";

@mixin fg-color($property) {
  @each $item in $list {
    $color-length: str-length($item);
    @if( $color-length % 2 != 0 ) {
      #{$property}: unquote($item);
    }
  }
}

h1 {
  margin-right: 5px;
  text-align: center;
  font-size: em-to-px(40px);
  @include ps-after(width, 100);
  @include fg-color(color);
}

// Example-4
$list-map : (success: lightgreen, alert: tomato, info: lightblue);

@mixin button-state($btn-state) {
  @if (length($list-map) > 2 or length($list-map) < 5) {
    $var : map-get($list-map, info);
    background-color: lighten($var, 10%);
  }
  
  @each $state, $color in $list-map {
    @if($state == $btn-state) {
      border: 5px solid $color;
    }
  }
}

.btn {
  width: 50px;
  height: 50px;
  @include button-state(success);
}

SassMeister-output.css

@charset "UTF-8";
h4 {
  font: 16px/24px Arial sans-serif;
}
h4:before {
  content: "My font property is: 16px/24px Arial sans-serif.";
}

h1 {
  margin-right: 5px;
  text-align: center;
  font-size: 2.5em;
  color: lightblue;
}
h1:after {
  content: '☺';
  width: 68%;
  height: 68%;
  border: 7px solid #BEEB9F;
  display: block;
  margin: 0 auto;
  color: #FF6138;
}

.btn {
  width: 50px;
  height: 50px;
  background-color: #d4ebf2;
  border: 5px solid lightgreen;
}

SassMeister-rendered.html

<h1>Thanks for taking a look!</h1>
<h2>Hi there</h2>
<div class="btn"></div>