Holy Trinity of Sass: Complex Function Demo

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

$sans: sans-serif;
$serif: serif;

$sans-weight: (
  lighter: 300,
  bolder: 700
);

$serif-weight: (
  lighter: 400,
  bolder: 900
);

@function weight($family:null, $weight:null, ) {
  @if $weight == lighter or bolder {
    @if $family == $sans {
     @return map-get($sans-weight, $weight);
    }
    @else if $family == $serif {
     @return map-get($serif-weight, $weight);
    }
  }
}

.my-class {
  font-family: $serif;
  font-weight: weight($serif, bolder);
}

SassMeister-output.css

.my-class {
  font-family: serif;
  font-weight: 900;
}