Skip to content

Instantly share code, notes, and snippets.

@jdeagle

jdeagle/SassMeister-input.scss

Created July 18, 2015 18:08
Show Gist options
  • Save jdeagle/0e52565a6279ba107b6d to your computer and use it in GitHub Desktop.
Save jdeagle/0e52565a6279ba107b6d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jdeagle created this gist Jul 18, 2015.
    48 changes: 48 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    // ----
    // libsass (v3.2.5)
    // ----

    @function get-px-from-vw($vw, $contextWidth) {
    @return (($contextWidth / 100) * $vw) + px;
    }
    @function strip-units($number) {
    @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
    }

    @return $number;
    }

    @mixin font-size($sizeValue: 1.6, $line: $sizeValue + .5, $contextWidth:0) {
    //
    // examples
    // set as REM
    // @include font-size(16.4, 14.5);
    //
    // set as VW
    // @include font-size(6.45vw, 8vw);
    //
    @if type-of($sizeValue) == "number" and unitless($sizeValue) {
    font-size: ($sizeValue * 10) + px;
    line-height: ($line * 10) + px;
    font-size: $sizeValue + rem;
    line-height: $line + rem;
    } @else {
    @if $contextWidth > 0 and unit($sizeValue) == vw {
    font-size: get-px-from-vw(strip-units($sizeValue), strip-units($contextWidth));
    line-height: get-px-from-vw(strip-units($line), strip-units($contextWidth));
    }
    font-size: $sizeValue;
    line-height: ($line);
    }
    }

    .foo {
    @include font-size(6.25vw, 7vw, 320);
    }
    .bar {
    @include font-size(6.25px, 7vw, 320);
    }
    .baz {
    @include font-size(6.25vw, 7vw);
    }
    16 changes: 16 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    .foo {
    font-size: 20px;
    line-height: 22.4px;
    font-size: 6.25vw;
    line-height: 7vw;
    }

    .bar {
    font-size: 6.25px;
    line-height: 7vw;
    }

    .baz {
    font-size: 6.25vw;
    line-height: 7vw;
    }