Generated by SassMeister.com.

SassMeister-input.scss

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

// Sass breakpoints with contextual rem calculations
// ===================================================================
// I'm using rems, and most of my elements will use be relative to the 
// base setting on the html element (e.g. p, ul, etc.), but some will 
// have specific sizes, which I want to set in pixels but convert via
// Sass into rems, relative to the context of the current breakpoint.

// This is how I'm doing it.

// Array of breakpoints and what 1rem should equal
$breakpoints :(
    sm: (
        remSize: 16px,
        width: 320px
    ),
    md: (
        remSize: 19px,
        width: 480px
    ),
    lg: (
        remSize: 24px,
        width: 800px
    ),
    xl: (
        remSize: 24px,
        width: 1200px
    )
);

// Get width of the requested breakpoint
@function get-breakpoint-width($breakpoint) {
    @if(map-has-key($breakpoints, $breakpoint)) {
        @return em(map-get(map-get($breakpoints, $breakpoint), width));
    } @else {
        @return $breakpoint;
    }
}

// Convert px to em
@function em($px-value) {
    $size: $px-value/ 16px;
    @return $size * 1em;
}

// Convert px to rem, relative to context
@function rem($px-value, $multiplier: 16px) {
    $size: $px-value / $multiplier;
    @return $size * 1rem;
}

// Get remSize for a specified breakpoint
@function get-rem-size($breakpoint) {
    @if(map-has-key($breakpoints, $breakpoint)) {
        @return map-get(map-get($breakpoints, $breakpoint), remSize)
    } @else {
        @warn "The breakpoint `#{$breakpoint}` is not defined.";
    }
}
// Convert a pixel size relative to a breakpoint
@function get-size($size: 16px, $breakpoint: sm) {
    $multiplier: get-rem-size($breakpoint);
    @return rem($size, $multiplier);
}

// Basic mq
@mixin respond-min($breakpoint) {
    $width: get-breakpoint($breakpoint);

    @media screen and (min-width: $width) {
        @content;
    }
}


// Setup base rem sizing
html {
  font-size: get-rem-size(sm); // 16px
  
  @include respond-min(md) {
    font-size: get-rem-size(md); // 19px
  } 
  
  @include respond-min(lg) {
    font-size: get-rem-size(lg); // 24px
  } 
}

// Example usage 
.c-heading-main {
  font-size: get-size(24px); // 24px relative to a 16px base = 1.5rem 
  
  @include respond-min(md) {
    font-size: get-size(38px, md); // 38px relative to a 19px base = 2rem
  }
  
  @include respond-min(lg) {
    font-size: get-size(60px, lg); // 60px relative to a 24px base = 2.5rem
  }
}

SassMeister-output.css

html {
  font-size: 16px;
}
@media screen and (min-width: get-breakpoint(md)) {
  html {
    font-size: 19px;
  }
}
@media screen and (min-width: get-breakpoint(lg)) {
  html {
    font-size: 24px;
  }
}

.c-heading-main {
  font-size: 1.5rem;
}
@media screen and (min-width: get-breakpoint(md)) {
  .c-heading-main {
    font-size: 2rem;
  }
}
@media screen and (min-width: get-breakpoint(lg)) {
  .c-heading-main {
    font-size: 2.5rem;
  }
}