Skip to content

Instantly share code, notes, and snippets.

@joshangell

joshangell/rem.scss

Created September 14, 2012 15:09
Show Gist options
  • Save joshangell/3722518 to your computer and use it in GitHub Desktop.
Save joshangell/3722518 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @growdigital growdigital revised this gist Feb 9, 2012. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -20,10 +20,8 @@ $baseline_px: 10px;
    @mixin rem($property, $px_values) {
    // Convert the baseline into rems
    $baseline_rem: ($baseline_px / 1rem);

    // Print the first line in pixel values
    #{$property}: $px_values;

    // If only one (numeric) value, return the property/value line for it.
    @if type-of($px_values) == 'number' {
    #{$property}: $px_values / $baseline_rem;
  2. @growdigital growdigital revised this gist Feb 9, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@

    // Baseline, measured in pixels
    // Value should be same as font-size value for the html element
    // If html element's font-size set to 62.5% (of the browser's default font-size of 16px),
    // If html element's font-size set to 62.5% (of the browser's default 16px),
    // then variable below would be 10px.
    $baseline_px: 10px;

  3. @growdigital growdigital revised this gist Feb 9, 2012. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    /* 'rem' is a Sass mixin that converts pixel values to rem values
    * It returns 2 lines of code — regular pixel values and converted rem values
    * Returns 2 lines of code — regular pixel values and converted rem values
    *
    * Sample input:
    * .element { @include rem('padding',10px 0 2px 5px); }
    * .element {
    * @include rem('padding',10px 0 2px 5px); }
    *
    * Sample output:
    * .element {
    * padding: 10px 0 2px 5px;
    * padding: 1rem 0 0.2rem 0.5rem;
    * }
    * padding: 1rem 0 0.2rem 0.5rem; }
    */

    // Baseline, measured in pixels
  4. @growdigital growdigital revised this gist Feb 9, 2012. 1 changed file with 8 additions and 24 deletions.
    32 changes: 8 additions & 24 deletions rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,64 +1,48 @@
    /*
    * 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
    * It returns two lines of code — one of the regular pixel values (for IE), and another with the
    * converted rem values (for everyone else). Special thanks to Chris Epstein (http://chriseppstein.github.com)
    * and Martin Bavio (http://martinbavio.com) for the help and code!
    /* 'rem' is a Sass mixin that converts pixel values to rem values
    * It returns 2 lines of code — regular pixel values and converted rem values
    *
    * Sample input:
    * .element {
    * @include rem('padding',10px 0 2px 5px);
    * }
    * .element { @include rem('padding',10px 0 2px 5px); }
    *
    * Sample output:
    * .element {
    * padding: 10px 0 2px 5px;
    * padding: 1rem 0 0.2rem 0.5rem;
    * }
    *
    */

    // Baseline, measured in pixels
    // The value should be the same as the font-size value for the html element
    // If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
    // then the variable below would be 10px.
    // Value should be same as font-size value for the html element
    // If html element's font-size set to 62.5% (of the browser's default font-size of 16px),
    // then variable below would be 10px.
    $baseline_px: 10px;

    @mixin rem($property, $px_values) {

    // Convert the baseline into rems
    $baseline_rem: ($baseline_px / 1rem);

    // Print the first line in pixel values
    #{$property}: $px_values;

    // If there is only one (numeric) value, return the property/value line for it.
    // If only one (numeric) value, return the property/value line for it.
    @if type-of($px_values) == 'number' {
    #{$property}: $px_values / $baseline_rem;
    }

    // If there is more than one value, create a list and perform equations on each value
    // If more than one value, create list & perform equations on each value
    @else {

    // Create an empty list that we can dump values into
    $rem_values: ();

    @each $value in $px_values {

    // If the value is zero, return 0
    @if $value == 0 {
    $rem_values: append($rem_values, $value);
    }

    // If the value is not zero, convert it from px to rem
    @else {
    $rem_values: append($rem_values, ($value / $baseline_rem) );
    }

    }

    // Return the property and its list of converted values
    #{$property}: $rem_values;

    }

    }
  5. Ray Brown revised this gist Aug 9, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    /*
    * 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
    * It returns two lines of code — one of the regular pixel values (for IE), and another with the
    * converted rem values (for everyone else). Special thanks to Martin Bavio (http://martinbavio.com)
    * for the original code!
    * converted rem values (for everyone else). Special thanks to Chris Epstein (http://chriseppstein.github.com)
    * and Martin Bavio (http://martinbavio.com) for the help and code!
    *
    * Sample input:
    * .element {
  6. Ray Brown revised this gist Aug 9, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    /*
    * 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
    * It returns two lines of code — one of the regular pixel values (for IE), and another with the
    * converted rem values (for everyone else).
    *
    * converted rem values (for everyone else). Special thanks to Martin Bavio (http://martinbavio.com)
    * for the original code!
    *
    * Sample input:
    * .element {
  7. Ray Brown revised this gist Aug 9, 2011. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -23,17 +23,17 @@
    // then the variable below would be 10px.
    $baseline_px: 10px;

    @mixin rem($key, $values) {
    @mixin rem($property, $px_values) {

    // Convert the baseline into rems
    $baseline_rem: ($baseline_px / 1rem);

    // Print the first line in pixel values
    #{$key}: $values;
    #{$property}: $px_values;

    // If there is only one (numeric) value, return the property/value line for it.
    @if type-of($values) == 'number' {
    #{$key}: $values / $baseline_rem;
    @if type-of($px_values) == 'number' {
    #{$property}: $px_values / $baseline_rem;
    }

    // If there is more than one value, create a list and perform equations on each value
    @@ -42,7 +42,7 @@ $baseline_px: 10px;
    // Create an empty list that we can dump values into
    $rem_values: ();

    @each $value in $values {
    @each $value in $px_values {

    // If the value is zero, return 0
    @if $value == 0 {
    @@ -57,7 +57,7 @@ $baseline_px: 10px;
    }

    // Return the property and its list of converted values
    #{$key}: $rem_values;
    #{$property}: $rem_values;

    }

  8. Ray Brown revised this gist Aug 9, 2011. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -40,24 +40,24 @@ $baseline_px: 10px;
    @else {

    // Create an empty list that we can dump values into
    $remlist: ();
    $rem_values: ();

    @each $value in $values {

    // If the value is zero, return 0
    @if $value == 0 {
    $remlist: append($remlist, $value);
    $rem_values: append($rem_values, $value);
    }

    // If the value is not zero, convert it from px to rem
    @else {
    $remlist: append($remlist, ($value / $baseline_rem) );
    $rem_values: append($rem_values, ($value / $baseline_rem) );
    }

    }

    // Return the property and its list of converted values
    #{$key}: $remlist;
    #{$key}: $rem_values;

    }

  9. Ray Brown revised this gist Aug 9, 2011. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,8 @@

    // Baseline, measured in pixels
    // The value should be the same as the font-size value for the html element
    // If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px), then the variable below would be 10px.
    // If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
    // then the variable below would be 10px.
    $baseline_px: 10px;

    @mixin rem($key, $values) {
  10. Ray Brown revised this gist Aug 9, 2011. 1 changed file with 23 additions and 2 deletions.
    25 changes: 23 additions & 2 deletions rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,25 @@
    // This value should be the same as the font-size value for the html element
    /*
    * 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
    * It returns two lines of code — one of the regular pixel values (for IE), and another with the
    * converted rem values (for everyone else).
    *
    *
    * Sample input:
    * .element {
    * @include rem('padding',10px 0 2px 5px);
    * }
    *
    * Sample output:
    * .element {
    * padding: 10px 0 2px 5px;
    * padding: 1rem 0 0.2rem 0.5rem;
    * }
    *
    */

    // Baseline, measured in pixels
    // The value should be the same as the font-size value for the html element
    // If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px), then the variable below would be 10px.
    $baseline_px: 10px;

    @mixin rem($key, $values) {
    @@ -39,4 +60,4 @@ $baseline_px: 10px;

    }

    }
    }
  11. Ray Brown created this gist Aug 9, 2011.
    42 changes: 42 additions & 0 deletions rem.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    // This value should be the same as the font-size value for the html element
    $baseline_px: 10px;

    @mixin rem($key, $values) {

    // Convert the baseline into rems
    $baseline_rem: ($baseline_px / 1rem);

    // Print the first line in pixel values
    #{$key}: $values;

    // If there is only one (numeric) value, return the property/value line for it.
    @if type-of($values) == 'number' {
    #{$key}: $values / $baseline_rem;
    }

    // If there is more than one value, create a list and perform equations on each value
    @else {

    // Create an empty list that we can dump values into
    $remlist: ();

    @each $value in $values {

    // If the value is zero, return 0
    @if $value == 0 {
    $remlist: append($remlist, $value);
    }

    // If the value is not zero, convert it from px to rem
    @else {
    $remlist: append($remlist, ($value / $baseline_rem) );
    }

    }

    // Return the property and its list of converted values
    #{$key}: $remlist;

    }

    }