Skip to content

Instantly share code, notes, and snippets.

@frontendbeast

frontendbeast/SassMeister-input.scss

Last active August 29, 2015 14:21
Show Gist options
  • Save frontendbeast/49e3fe32a40ec4638fc2 to your computer and use it in GitHub Desktop.
Save frontendbeast/49e3fe32a40ec4638fc2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. frontendbeast revised this gist May 12, 2015. No changes.
  2. frontendbeast revised this gist May 12, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -22,6 +22,6 @@ $font-size-number: em_as_number(16px);
    // ==================================== //

    p {
    font-size: $font-size-string / 2;
    font-size: $font-size-number / 2;
    font-size: $font-size-string / 2; // Won't work
    font-size: $font-size-number / 2; // Works nicely
    }
  3. frontendbeast revised this gist May 12, 2015. No changes.
  4. frontendbeast revised this gist May 12, 2015. 1 changed file with 15 additions and 5 deletions.
    20 changes: 15 additions & 5 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,15 +3,25 @@
    // Compass (v1.0.1)
    // ----

    @function em($px-value) {
    @function em_as_string($px-value) {
    $size: $px-value/ 16px;
    @return $size#{em};
    }

    $font-size-function: em(16px);
    $font-size-value: 1em;
    @function em_as_number($px-value) {
    $size: $px-value/ 16px;
    @return $size*1em;
    }

    $font-size-string: em_as_string(16px);
    $font-size-number: em_as_number(16px);

    // ==================================== //
    // type-of($font-size-string) -> string //
    // type-of($font-size-number) -> number //
    // ==================================== //

    p {
    font-size: $font-size-function / 2;
    font-size: $font-size-value / 2;
    font-size: $font-size-string / 2;
    font-size: $font-size-number / 2;
    }
  5. frontendbeast revised this gist May 12, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@

    @function em($px-value) {
    $size: $px-value/ 16px;
    @return #{$size}em;
    @return $size#{em};
    }

    $font-size-function: em(16px);
  6. frontendbeast created this gist May 12, 2015.
    17 changes: 17 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    // ----
    // Sass (v3.3.14)
    // Compass (v1.0.1)
    // ----

    @function em($px-value) {
    $size: $px-value/ 16px;
    @return #{$size}em;
    }

    $font-size-function: em(16px);
    $font-size-value: 1em;

    p {
    font-size: $font-size-function / 2;
    font-size: $font-size-value / 2;
    }
    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 @@
    p {
    font-size: 1em/2;
    font-size: 0.5em;
    }