Skip to content

Instantly share code, notes, and snippets.

@nixstrom

nixstrom/SassMeister-input.scss

Last active August 29, 2015 14:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nixstrom/23e22814769ec5d8faa4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nixstrom/23e22814769ec5d8faa4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nixstrom revised this gist Dec 7, 2014. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,8 @@
    // ----

    $base-font-size: 16;


    //Function to calculate rem value from expected pixel value
    @function rem($values...) {
    // How many values must we loop through?
    $length: length($values);
  2. nixstrom revised this gist Dec 7, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,9 @@
    $base-font-size: 16;

    @function rem($values...) {
    // How many values must we loop through?
    $length: length($values);
    // Variable to hold our final values
    $output: '';

    @for $i from 1 through $length {
  3. nixstrom revised this gist Dec 7, 2014. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,8 @@ $base-font-size: 16;
    $value: $value/$base-font-size;
    $output: #{$output + $value}rem;
    }


    // Unless it's the last value, add a whitespace
    @if $i < $length {
    $output: #{$output + " "};
    }
  4. nixstrom revised this gist Dec 7, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,7 @@ $base-font-size: 16;
    $output: #{$output + $value};
    }
    @else {
    // Convert input "base-pixel-value" to corresponding rem value
    $value: $value/$base-font-size;
    $output: #{$output + $value}rem;
    }
  5. nixstrom revised this gist Dec 7, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,7 @@ $base-font-size: 16;
    @for $i from 1 through $length {
    $value: nth($values, $i);

    // If value is 0 or auto, preserve it as is
    @if $value == 0 or $value == auto {
    $output: #{$output + $value};
    }
  6. nixstrom revised this gist Dec 7, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,6 @@ $base-font-size: 16;
    }
    @else {
    $value: $value/$base-font-size;

    $output: #{$output + $value}rem;
    }

  7. nixstrom revised this gist Dec 7, 2014. 2 changed files with 11 additions and 5 deletions.
    14 changes: 10 additions & 4 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -11,10 +11,16 @@ $base-font-size: 16;

    @for $i from 1 through $length {
    $value: nth($values, $i);
    $value: $value/$base-font-size;

    $output: #{$output + $value}rem;

    @if $value == 0 or $value == auto {
    $output: #{$output + $value};
    }
    @else {
    $value: $value/$base-font-size;

    $output: #{$output + $value}rem;
    }

    @if $i < $length {
    $output: #{$output + " "};
    }
    @@ -25,5 +31,5 @@ $base-font-size: 16;

    .foo {
    font-size: rem(14);
    padding: rem(16, 10, 20);
    padding: rem(16, auto, 0, 10);
    }
    2 changes: 1 addition & 1 deletion SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    .foo {
    font-size: 0.875rem;
    padding: 1rem 0.625rem 1.25rem;
    padding: 1rem auto 0 0.625rem;
    }
  8. nixstrom revised this gist Dec 7, 2014. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -7,20 +7,20 @@ $base-font-size: 16;

    @function rem($values...) {
    $length: length($values);
    $remValues: '';
    $output: '';

    @for $i from 1 through $length {
    $value: nth($values, $i);
    $value: $value/$base-font-size;

    $remValues: #{$remValues + $value}rem;
    $output: #{$output + $value}rem;

    @if $i < $length {
    $remValues: #{$remValues + " "};
    $output: #{$output + " "};
    }
    }

    @return $remValues;
    @return $output;
    }

    .foo {
  9. nixstrom created this gist Dec 7, 2014.
    29 changes: 29 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    // ----
    // Sass (v3.4.7)
    // Compass (v1.0.1)
    // ----

    $base-font-size: 16;

    @function rem($values...) {
    $length: length($values);
    $remValues: '';

    @for $i from 1 through $length {
    $value: nth($values, $i);
    $value: $value/$base-font-size;

    $remValues: #{$remValues + $value}rem;

    @if $i < $length {
    $remValues: #{$remValues + " "};
    }
    }

    @return $remValues;
    }

    .foo {
    font-size: rem(14);
    padding: rem(16, 10, 20);
    }
    4 changes: 4 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    .foo {
    font-size: 0.875rem;
    padding: 1rem 0.625rem 1.25rem;
    }