Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@mixin breakpoint($breakpoint) {
  
    // The following code no longer works in libSass 3.3.0
    //Check if the value passed in is a unitless number
    @if not unitless($breakpoint) {
        //Pass an error if not unitless.
        @error 'Your value for `$breakpoint` is not unitless. Please try again.';

    } @else {
        $bp: ($breakpoint / 16) * 1em;

        //Set Media Query and pass through a number.
        @media screen and (min-width: $bp) {
            @content;
        }
    }
    
    // However, this does work in 3.3.0
    @if unitless($breakpoint) {
        $bp: ($breakpoint / 16) * 1em;

        //Set Media Query and pass through a number.
        @media screen and (min-width: $bp) {
            @content;
        }

    } @else {
        //Pass an error if not unitless.
        @error 'Your value for `$breakpoint` is not unitless. Please try again.';
    }
    
    // This doesn't make sense to me as both work the same, just written in a different order.
}

// The following function also no longer works in libSass 3.3.0 *unless* a default variable is defined.
$root-font-size: 16;

@function relative-sizing($target, $context: false) {
    
    // In libSass 3.3.0, this needs a default value otherwise it throws an error.
    // $value: 0;

    //Is the target value unitless?
    @if unitless($target) {

        //Is there a context?
        @if $context {

            //Is the context unitless?
            @if unitless($context) {
                $value: ($target / $context) * 1em;
            }

            @else {
                @error 'Your value for `$context` is not unitless.';
            }

        }

        @else {
            $value: ($target / $root-font-size) * 1rem;
        }
    }

    @else {
        @error 'Your value for `$target` is not unitless.';
    }

    @return $value;
}

@include breakpoint(600) {
  .element {
    width: 480px;
    font-size: relative-sizing(20);
  }
}

SassMeister-output.css

@media screen and (min-width: 37.5em) {
  .element {
    width: 480px;
    font-size: 1.25rem;
  }
}

@media screen and (min-width: 37.5em) {
  .element {
    width: 480px;
    font-size: 1.25rem;
  }
}