Skip to content

Instantly share code, notes, and snippets.

@davidpanzarella

davidpanzarella/SassMeister-input.scss

Created July 25, 2016 21:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davidpanzarella/2c87bde751faa378c1abbbb52f09f9be to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davidpanzarella/2c87bde751faa378c1abbbb52f09f9be to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. indrekpaas revised this gist Apr 2, 2016. 2 changed files with 16 additions and 35 deletions.
    36 changes: 16 additions & 20 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -2,22 +2,22 @@
    // libsass (v3.3.2)
    // ----

    /*! ========================================================================
    PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
    ---------------------------------------------------
    Indrek Paas @indrekpaas
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    31.03.2016 Remove redundant parenthesis from output
    02.10.2015 Add support for multiple properties
    ======================================================================== */

    // =========================================================================
    //
    // PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
    // ---------------------------------------------------
    // Indrek Paas @indrekpaas
    //
    // Inspired by Mike Riethmuller's Precise control over responsive typography
    // http://madebymike.com.au/writing/precise-control-responsive-typography/
    //
    // `strip-unit()` function by Hugo Giraudel
    //
    // 31.03.2016 Remove redundant parenthesis from output
    // 02.10.2015 Add support for multiple properties
    // 24.04.2015 Initial release
    //
    // =========================================================================

    @mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
    & {
    @@ -39,14 +39,10 @@
    }
    }


    @function strip-unit($value) {
    @return $value / ($value * 0 + 1);
    }




    /* Single property */
    html {
    @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
    15 changes: 0 additions & 15 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,3 @@
    /*! ========================================================================
    PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
    ---------------------------------------------------
    Indrek Paas @indrekpaas
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    31.03.2016 Remove redundant parenthesis from output
    02.10.2015 Add support for multiple properties
    ======================================================================== */
    /* Single property */
    html {
    font-size: 14px;
  2. indrekpaas revised this gist Mar 31, 2016. 2 changed files with 7 additions and 5 deletions.
    5 changes: 3 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // ----
    // libsass (v3.2.5)
    // libsass (v3.3.2)
    // ----

    /*! ========================================================================
    @@ -13,6 +13,7 @@
    `strip-unit()` function by Hugo Giraudel
    31.03.2016 Remove redundant parenthesis from output
    02.10.2015 Add support for multiple properties
    ======================================================================== */
    @@ -26,7 +27,7 @@

    @media screen and (min-width: $min-vw) {
    @each $property in $properties {
    #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
    }

    7 changes: 4 additions & 3 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -9,6 +9,7 @@
    `strip-unit()` function by Hugo Giraudel
    31.03.2016 Remove redundant parenthesis from output
    02.10.2015 Add support for multiple properties
    ======================================================================== */
    @@ -19,7 +20,7 @@ html {

    @media screen and (min-width: 320px) {
    html {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046));
    font-size: calc(14px + 4 * (100vw - 320px) / 1046);
    }
    }

    @@ -37,8 +38,8 @@ h1 {

    @media screen and (min-width: 20em) {
    h1 {
    padding-bottom: calc(2em + 2 * ((100vw - 20em) / 50));
    padding-top: calc(2em + 2 * ((100vw - 20em) / 50));
    padding-bottom: calc(2em + 2 * (100vw - 20em) / 50);
    padding-top: calc(2em + 2 * (100vw - 20em) / 50);
    }
    }

  3. indrekpaas revised this gist Oct 31, 2015. No changes.
  4. indrekpaas revised this gist Oct 30, 2015. 2 changed files with 9 additions and 48 deletions.
    8 changes: 1 addition & 7 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -53,11 +53,5 @@ html {

    /* Multiple properties with same values */
    h1 {
    @include fluid-type(font-size margin-bottom, 320px, 1366px, 14px, 18px);
    }

    /* Multiple properties with different values */
    div {
    @include fluid-type(padding, 320px, 1366px, 14px, 18px);
    @include fluid-type(width, 20em, 100em, 8em, 16em);
    @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
    }
    49 changes: 8 additions & 41 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -31,53 +31,20 @@ html {

    /* Multiple properties with same values */
    h1 {
    font-size: 14px;
    margin-bottom: 14px;
    padding-bottom: 2em;
    padding-top: 2em;
    }

    @media screen and (min-width: 320px) {
    @media screen and (min-width: 20em) {
    h1 {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046));
    margin-bottom: calc(14px + 4 * ((100vw - 320px) / 1046));
    padding-bottom: calc(2em + 2 * ((100vw - 20em) / 50));
    padding-top: calc(2em + 2 * ((100vw - 20em) / 50));
    }
    }

    @media screen and (min-width: 1366px) {
    @media screen and (min-width: 70em) {
    h1 {
    font-size: 18px;
    margin-bottom: 18px;
    }
    }

    /* Multiple properties with different values */
    div {
    padding: 14px;
    }

    @media screen and (min-width: 320px) {
    div {
    padding: calc(14px + 4 * ((100vw - 320px) / 1046));
    }
    }

    @media screen and (min-width: 1366px) {
    div {
    padding: 18px;
    }
    }

    div {
    width: 8em;
    }

    @media screen and (min-width: 20em) {
    div {
    width: calc(8em + 8 * ((100vw - 20em) / 80));
    }
    }

    @media screen and (min-width: 100em) {
    div {
    width: 16em;
    padding-bottom: 4em;
    padding-top: 4em;
    }
    }
  5. indrekpaas revised this gist Oct 3, 2015. 2 changed files with 6 additions and 2 deletions.
    4 changes: 3 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -6,12 +6,14 @@
    PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
    ---------------------------------------------------
    Author: Indrek Paas <@indrekpaas>
    Indrek Paas @indrekpaas
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    02.10.2015 Add support for multiple properties
    ======================================================================== */

    4 changes: 3 additions & 1 deletion SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,12 +2,14 @@
    PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
    ---------------------------------------------------
    Author: Indrek Paas <@indrekpaas>
    Indrek Paas @indrekpaas
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    02.10.2015 Add support for multiple properties
    ======================================================================== */
    /* Single property */
  6. indrekpaas revised this gist Oct 1, 2015. 1 changed file with 58 additions and 30 deletions.
    88 changes: 58 additions & 30 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,42 +12,70 @@
    ======================================================================== */
    /* Single property */
    html {
    font-size: 14px; }
    @media screen and (min-width: 320px) {
    html {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046)); } }
    @media screen and (min-width: 1366px) {
    html {
    font-size: 18px; } }
    font-size: 14px;
    }

    @media screen and (min-width: 320px) {
    html {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046));
    }
    }

    @media screen and (min-width: 1366px) {
    html {
    font-size: 18px;
    }
    }

    /* Multiple properties with same values */
    h1 {
    font-size: 14px;
    margin-bottom: 14px; }
    @media screen and (min-width: 320px) {
    h1 {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046));
    margin-bottom: calc(14px + 4 * ((100vw - 320px) / 1046)); } }
    @media screen and (min-width: 1366px) {
    h1 {
    font-size: 18px;
    margin-bottom: 18px; } }
    margin-bottom: 14px;
    }

    @media screen and (min-width: 320px) {
    h1 {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046));
    margin-bottom: calc(14px + 4 * ((100vw - 320px) / 1046));
    }
    }

    @media screen and (min-width: 1366px) {
    h1 {
    font-size: 18px;
    margin-bottom: 18px;
    }
    }

    /* Multiple properties with different values */
    div {
    padding: 14px; }
    @media screen and (min-width: 320px) {
    div {
    padding: calc(14px + 4 * ((100vw - 320px) / 1046)); } }
    @media screen and (min-width: 1366px) {
    div {
    padding: 18px; } }
    padding: 14px;
    }

    @media screen and (min-width: 320px) {
    div {
    padding: calc(14px + 4 * ((100vw - 320px) / 1046));
    }
    }

    @media screen and (min-width: 1366px) {
    div {
    padding: 18px;
    }
    }

    div {
    width: 8em; }
    @media screen and (min-width: 20em) {
    div {
    width: calc(8em + 8 * ((100vw - 20em) / 80)); } }
    @media screen and (min-width: 100em) {
    div {
    width: 16em; } }
    width: 8em;
    }

    @media screen and (min-width: 20em) {
    div {
    width: calc(8em + 8 * ((100vw - 20em) / 80));
    }
    }

    @media screen and (min-width: 100em) {
    div {
    width: 16em;
    }
    }
  7. indrekpaas revised this gist Sep 30, 2015. 2 changed files with 57 additions and 33 deletions.
    26 changes: 20 additions & 6 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -16,16 +16,22 @@
    ======================================================================== */


    @mixin fluid-type($min-vw, $max-vw, $min-value, $max-value, $property: font-size) {
    @mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
    & {
    #{$property}: $min-value;
    @each $property in $properties {
    #{$property}: $min-value;
    }

    @media screen and (min-width: $min-vw) {
    #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    @each $property in $properties {
    #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    }
    }

    @media screen and (min-width: $max-vw) {
    #{$property}: $max-value;
    @each $property in $properties {
    #{$property}: $max-value;
    }
    }
    }
    }
    @@ -38,10 +44,18 @@



    /* Single property */
    html {
    @include fluid-type(320px, 1366px, 14px, 18px);
    @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
    }

    /* Multiple properties with same values */
    h1 {
    @include fluid-type(font-size margin-bottom, 320px, 1366px, 14px, 18px);
    }

    /* Multiple properties with different values */
    div {
    @include fluid-type(32em, 64em, 8em, 12em, width);
    @include fluid-type(padding, 320px, 1366px, 14px, 18px);
    @include fluid-type(width, 20em, 100em, 8em, 16em);
    }
    64 changes: 37 additions & 27 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -10,34 +10,44 @@
    `strip-unit()` function by Hugo Giraudel
    ======================================================================== */
    /* Single property */
    html {
    font-size: 14px; }
    @media screen and (min-width: 320px) {
    html {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046)); } }
    @media screen and (min-width: 1366px) {
    html {
    font-size: 18px; } }

    /* Multiple properties with same values */
    h1 {
    font-size: 14px;
    }

    @media screen and (min-width: 320px) {
    html {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046));
    }
    }

    @media screen and (min-width: 1366px) {
    html {
    font-size: 18px;
    }
    }

    margin-bottom: 14px; }
    @media screen and (min-width: 320px) {
    h1 {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046));
    margin-bottom: calc(14px + 4 * ((100vw - 320px) / 1046)); } }
    @media screen and (min-width: 1366px) {
    h1 {
    font-size: 18px;
    margin-bottom: 18px; } }

    /* Multiple properties with different values */
    div {
    width: 8em;
    }
    padding: 14px; }
    @media screen and (min-width: 320px) {
    div {
    padding: calc(14px + 4 * ((100vw - 320px) / 1046)); } }
    @media screen and (min-width: 1366px) {
    div {
    padding: 18px; } }

    @media screen and (min-width: 32em) {
    div {
    width: calc(8em + 4 * ((100vw - 32em) / 32));
    }
    }

    @media screen and (min-width: 64em) {
    div {
    width: 12em;
    }
    }
    div {
    width: 8em; }
    @media screen and (min-width: 20em) {
    div {
    width: calc(8em + 8 * ((100vw - 20em) / 80)); } }
    @media screen and (min-width: 100em) {
    div {
    width: 16em; } }
  8. indrekpaas revised this gist Sep 7, 2015. 2 changed files with 5 additions and 2 deletions.
    3 changes: 1 addition & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    // ----
    // Sass (v3.4.14)
    // Compass (v1.0.3)
    // libsass (v3.2.5)
    // ----

    /*! ========================================================================
    4 changes: 4 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,11 +13,13 @@
    html {
    font-size: 14px;
    }

    @media screen and (min-width: 320px) {
    html {
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046));
    }
    }

    @media screen and (min-width: 1366px) {
    html {
    font-size: 18px;
    @@ -27,11 +29,13 @@ html {
    div {
    width: 8em;
    }

    @media screen and (min-width: 32em) {
    div {
    width: calc(8em + 4 * ((100vw - 32em) / 32));
    }
    }

    @media screen and (min-width: 64em) {
    div {
    width: 12em;
  9. indrekpaas revised this gist Aug 1, 2015. No changes.
  10. indrekpaas revised this gist Aug 1, 2015. 2 changed files with 35 additions and 22 deletions.
    43 changes: 21 additions & 22 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -17,33 +17,32 @@
    ======================================================================== */


    @function strip-unit($value) {
    @return $value / ($value * 0 + 1);
    }
    @mixin fluid-type($min-vw, $max-vw, $min-value, $max-value, $property: font-size) {
    & {
    #{$property}: $min-value;

    @media screen and (min-width: $min-vw) {
    #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    }

    @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
    $u1: unit($min-vw);
    $u2: unit($max-vw);
    $u3: unit($min-font-size);
    $u4: unit($max-font-size);

    @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
    font-size: $min-font-size;

    @media screen and (min-width: $min-vw) {
    font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    }

    @media screen and (min-width: $max-vw) {
    font-size: $max-font-size;
    }
    @media screen and (min-width: $max-vw) {
    #{$property}: $max-value;
    }
    } @else {
    @error "Detected mixed units. Please use the same units for all parameters.";
    }
    }


    @function strip-unit($value) {
    @return $value / ($value * 0 + 1);
    }




    html {
    @include fluid-type(320px, 1366px, 14px, 18px);
    }

    div {
    @include fluid-type(32em, 64em, 8em, 12em, width);
    }
    14 changes: 14 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -23,3 +23,17 @@ html {
    font-size: 18px;
    }
    }

    div {
    width: 8em;
    }
    @media screen and (min-width: 32em) {
    div {
    width: calc(8em + 4 * ((100vw - 32em) / 32));
    }
    }
    @media screen and (min-width: 64em) {
    div {
    width: 12em;
    }
    }
  11. indrekpaas revised this gist Jun 10, 2015. 1 changed file with 18 additions and 9 deletions.
    27 changes: 18 additions & 9 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -22,16 +22,25 @@
    }

    @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
    & {
    font-size: $min-font-size;

    @media screen and (min-width: $min-vw) {
    font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    }

    @media screen and (min-width: $max-vw) {
    font-size: $max-font-size;
    $u1: unit($min-vw);
    $u2: unit($max-vw);
    $u3: unit($min-font-size);
    $u4: unit($max-font-size);

    @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
    font-size: $min-font-size;

    @media screen and (min-width: $min-vw) {
    font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    }

    @media screen and (min-width: $max-vw) {
    font-size: $max-font-size;
    }
    }
    } @else {
    @error "Detected mixed units. Please use the same units for all parameters.";
    }
    }

  12. indrekpaas revised this gist Jun 10, 2015. 2 changed files with 9 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -12,15 +12,21 @@
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    ======================================================================== */


    @function strip-unit($value) {
    @return $value / ($value * 0 + 1);
    }

    @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
    & {
    font-size: $min-font-size;

    @media screen and (min-width: $min-vw) {
    font-size: calc(#{$min-font-size} + #{($max-font-size - $min-font-size) / 1px} * ((100vw - #{$min-vw}) / #{($max-vw - $min-vw) / 1px}));
    font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    }

    @media screen and (min-width: $max-vw) {
    2 changes: 2 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,8 @@
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    ======================================================================== */
    html {
    font-size: 14px;
  13. indrekpaas revised this gist Jun 9, 2015. 2 changed files with 5 additions and 19 deletions.
    18 changes: 3 additions & 15 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // ----
    // Sass (v3.4.13)
    // Sass (v3.4.14)
    // Compass (v1.0.3)
    // ----

    @@ -12,17 +12,15 @@
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    ======================================================================== */


    @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
    & {
    font-size: $min-font-size;

    @media screen and (min-width: $min-vw) and (max-width: $max-vw - 1) {
    font-size: calc(#{$min-font-size} + (#{strip-unit($max-font-size)} - #{strip-unit($min-font-size)}) * ((100vw - #{$min-vw}) / (#{strip-unit($max-vw)} - #{strip-unit($min-vw)})));
    @media screen and (min-width: $min-vw) {
    font-size: calc(#{$min-font-size} + #{($max-font-size - $min-font-size) / 1px} * ((100vw - #{$min-vw}) / #{($max-vw - $min-vw) / 1px}));
    }

    @media screen and (min-width: $max-vw) {
    @@ -31,16 +29,6 @@
    }
    }




    @function strip-unit($value) {
    @return $value / ($value * 0 + 1);
    }




    html {
    @include fluid-type(320px, 1366px, 14px, 18px);
    }
    6 changes: 2 additions & 4 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,15 +7,13 @@
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    ======================================================================== */
    html {
    font-size: 14px;
    }
    @media screen and (min-width: 320px) and (max-width: 1365px) {
    @media screen and (min-width: 320px) {
    html {
    font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1366 - 320)));
    font-size: calc(14px + 4 * ((100vw - 320px) / 1046));
    }
    }
    @media screen and (min-width: 1366px) {
  14. indrekpaas revised this gist Jun 7, 2015. 2 changed files with 6 additions and 6 deletions.
    4 changes: 2 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // ----
    // Sass (v3.4.12)
    // Sass (v3.4.13)
    // Compass (v1.0.3)
    // ----

    @@ -42,5 +42,5 @@


    html {
    @include fluid-type(320px, 1600px, 14px, 24px);
    @include fluid-type(320px, 1366px, 14px, 18px);
    }
    8 changes: 4 additions & 4 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,13 +13,13 @@
    html {
    font-size: 14px;
    }
    @media screen and (min-width: 320px) and (max-width: 1599px) {
    @media screen and (min-width: 320px) and (max-width: 1365px) {
    html {
    font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1600 - 320)));
    font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1366 - 320)));
    }
    }
    @media screen and (min-width: 1600px) {
    @media screen and (min-width: 1366px) {
    html {
    font-size: 24px;
    font-size: 18px;
    }
    }
  15. indrekpaas revised this gist Apr 24, 2015. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@
    font-size: $min-font-size;

    @media screen and (min-width: $min-vw) and (max-width: $max-vw - 1) {
    font-size: calc( #{$min-font-size} + ( #{strip-unit($max-font-size)} - #{strip-unit($min-font-size)} ) * ( ( 100vw - #{$min-vw} ) / ( #{strip-unit($max-vw)} - #{strip-unit($min-vw)} ) ) );
    font-size: calc(#{$min-font-size} + (#{strip-unit($max-font-size)} - #{strip-unit($min-font-size)}) * ((100vw - #{$min-vw}) / (#{strip-unit($max-vw)} - #{strip-unit($min-vw)})));
    }

    @media screen and (min-width: $max-vw) {
    2 changes: 1 addition & 1 deletion SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@ html {
    }
    @media screen and (min-width: 320px) and (max-width: 1599px) {
    html {
    font-size: calc( 14px + ( 24 - 14 ) * ( ( 100vw - 320px ) / ( 1600 - 320 ) ) );
    font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1600 - 320)));
    }
    }
    @media screen and (min-width: 1600px) {
  16. indrekpaas created this gist Apr 24, 2015.
    46 changes: 46 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    /*! ========================================================================
    PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
    ---------------------------------------------------
    Author: Indrek Paas <@indrekpaas>
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    ======================================================================== */


    @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
    & {
    font-size: $min-font-size;

    @media screen and (min-width: $min-vw) and (max-width: $max-vw - 1) {
    font-size: calc( #{$min-font-size} + ( #{strip-unit($max-font-size)} - #{strip-unit($min-font-size)} ) * ( ( 100vw - #{$min-vw} ) / ( #{strip-unit($max-vw)} - #{strip-unit($min-vw)} ) ) );
    }

    @media screen and (min-width: $max-vw) {
    font-size: $max-font-size;
    }
    }
    }




    @function strip-unit($value) {
    @return $value / ($value * 0 + 1);
    }




    html {
    @include fluid-type(320px, 1600px, 14px, 24px);
    }
    25 changes: 25 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    /*! ========================================================================
    PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
    ---------------------------------------------------
    Author: Indrek Paas <@indrekpaas>
    Inspired by Mike Riethmuller's Precise control over responsive typography
    http://madebymike.com.au/writing/precise-control-responsive-typography/
    `strip-unit()` function by Hugo Giraudel
    ======================================================================== */
    html {
    font-size: 14px;
    }
    @media screen and (min-width: 320px) and (max-width: 1599px) {
    html {
    font-size: calc( 14px + ( 24 - 14 ) * ( ( 100vw - 320px ) / ( 1600 - 320 ) ) );
    }
    }
    @media screen and (min-width: 1600px) {
    html {
    font-size: 24px;
    }
    }