Generated by SassMeister.com.

SassMeister-input-HTML.html

<button class="bx-btn--primary">
  primary button
</button>

SassMeister-input.scss

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

//////////////////////////////
// Variables
//////////////////////////////

$base-font-size: 16px;   // Use with em() and rem() functions
$typescale-base: 1rem;   // Defines the base font-size when using type-scale() function
$typescale-scale: 1.125; // Defines the typscale: Major Second

//////////////////////////////
// Functions
//////////////////////////////

//------------------//
// em() and rem()   //
//------------------//
// These functions are used to convert pixels (px) to ems or rems based on $base-font-size.
// .button-class { font-size: em(20px); } this will compile to:
// .button-class { font-size: 1.25em; }

@function rem($px, $base: $base-font-size) {
  @return ($px / $base) * 1rem;
}

@function em($px, $base: $base-font-size) {
  @return ($px / $base) * 1em;
}

//-----------//
// power()   //
//-----------//
// Helper function used in type-scale() function.
// Returns the number $x to the power of $n.
// power(10, 3); this will compile to: 100;

@function power($x, $n) {
  $ret: 1;

  @if $n >= 0 {
    @for $i from 1 through $n {
      $ret: $ret * $x;
    }
  } @else {
    @for $i from $n to 0 {
      $ret: $ret / $x;
    }
  }
  @return $ret;
}

//----------------//
// type-scale()   //
//----------------//
// Returns a number that correlates with a typescale that is defined by $typescale-scale.
// Use this function when styling font-size.
// font-size: typescale(1); will compile to font-size: 1.125rem;

@function typescale($n, $typescale-base:$typescale-base, $typescale-scale:$typescale-scale){
  @return $typescale-base * power($typescale-scale, $n);
}

//////////////////////////////
// Font Declarations
//////////////////////////////

%helvetica {
  font-family: HelveticaNeue, Helvetica Neue, Helvetica, sans-serif;
}
%helvetica-light {
  @extend %helvetica;
  font-weight: 200;
}
%helvetica-normal {
  @extend %helvetica;
  font-weight: 400;
}
%helvetica-medium {
  @extend %helvetica;
  font-weight: 500;
}
%helvetica-bold {
  @extend %helvetica;
  font-weight: 700;
}

//////////////////////////////
// Typography Styles
//////////////////////////////

%font-smoothing {
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bx-btn--primary {
  font-size: typescale(1);
  margin: em(20px);
}

SassMeister-output.css

.bx-btn--primary {
  font-size: 1.125rem;
  margin: 1.25em;
}

SassMeister-rendered.html

<button class="bx-btn--primary">
  primary button
</button>