Demo 6

browserslist

> 1%
last 2 versions

demo-6.css

.example-1 {
  font-family: Helvetica, sans-serif;
  font-size: 1rem;
  color: black;
}

.example-2 {
  font-family: Helvetica, sans-serif;
  font-size: 0.875rem;
  color: blue;
  text-transform: uppercase;
  letter-spacing: 0.125em;
}

.example-3 {
  font-family: Helvetica, sans-serif;
  font-size: 2rem;
  color: white;
  text-shadow: 0 0.25rem 1rem black;
}

demo-6.scss

// ----
// libsass (v3.5.4)
// ----
////
/// Demo 6: Complex Mixin
/// @author Philip Zastrow
/// @access private
////

$sans: Helvetica, sans-serif;

@mixin heading-1($size:1rem, $color:black, ) {
  font-family: $sans;
  font-size: $size;
  color: $color;

 @if $size == 0.875rem {
   text-transform: uppercase;
   letter-spacing: 0.125em;
 }

 @if $color == white {
   text-shadow: 0 0.25rem 1rem black;
 }
}

.example-1 {
  @include heading-1;
}

.example-2 {
  @include heading-1(
    $size: 0.875rem,
    $color: blue
  );
}

.example-3 {
  @include heading-1(
    $size: 2rem,
    $color: white
  );
}