Skip to content

Instantly share code, notes, and snippets.

@dingyi

dingyi/rem-fallback.less

Forked from drublic/rem-fallback.less
Created January 4, 2013 01:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dingyi/4449211 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dingyi/4449211 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @drublic drublic revised this gist Dec 25, 2012. 1 changed file with 6 additions and 3 deletions.
    9 changes: 6 additions & 3 deletions rem-fallback.less
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,13 @@
    @main-font-size: 16px;

    .x-rem (@property, @value) {
    ~"@{property}": @main-font-size * @value;
    ~"@{property}": ~"@{value}rem";

    // This is a workaround, inspired by https://github.com/borodean/less-properties
    @px-fallback: @value * @main-font-size;
    -: ~`(function () { return ';@{property}: @{px-fallback}'; }())`;
    -: ~`(function () { return ';@{property}: @{value}rem'; }())`;
    }

    .some-class {
    .x-rem("font-size", 1.4);
    .x-rem(font-size, 1.4);
    }
  2. @drublic drublic created this gist Dec 25, 2012.
    10 changes: 10 additions & 0 deletions rem-fallback.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    @main-font-size: 16px;

    .x-rem (@property, @value) {
    ~"@{property}": @main-font-size * @value;
    ~"@{property}": ~"@{value}rem";
    }

    .some-class {
    .x-rem("font-size", 1.4);
    }
    10 changes: 10 additions & 0 deletions rem-fallback.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    $main-font-size: 16px;

    @mixin x-rem ($property, $value) {
    #{$property}: $value * $main-font-size;
    #{$property}: #{$value}rem;
    }

    .some-class {
    @include x-rem(font-size, 1.4);
    }