IainIsCreative · October 26, 2015 23:16 · Oct 26, 2015 · Oct 26, 2015
diff --git a/SassMeister-input.scss b/SassMeister-input.scss
@@ -32,6 +32,8 @@
         //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.

diff --git a/SassMeister-input.scss b/SassMeister-input.scss
@@ -0,0 +1,79 @@
+// ----
+// 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.';
+    }
+}
+
+// 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);
+  }
+}
diff --git a/SassMeister-output.css b/SassMeister-output.css
@@ -0,0 +1,13 @@
+@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;
+  }
+}