基於 less,sass,stylus三種預處理rem

一. less形式

//定義一個變量和一個mixin（全局）
    @fontSizeBase: 75;//基於視覺稿橫屏尺寸/100得出的基準font-size
    .px2rem(@name, @px){
        @{name}: @px / @fontSizeBase * 1rem;
    }
    //使用示例：
    .fontsize {
        .px2rem(fontsize, 750);
    }
    //less翻譯結果：
    .fontsize {
        font-size: 10rem;
    }

二. sass形式

//定義一個變量和一個mixin
    $fontSizeBase: 75;//基於視覺稿橫屏尺寸/100得出的基準font-size
    @mixin px2rem($name, $px){
      #{$name}: $px / $fontSizeBase * 1rem;
    }
     
    //使用示例：
     .fontsize {
       @include px2rem(height, 750);
     }
     
    //scss翻譯結果：
     .fontsize {
        font-size: 10rem;
     }

三. stylus形式

//定義一個變量和一個mixin
    $fontSizeBase: 75;//基於視覺稿橫屏尺寸/100得出的基準font-size
    px2rem(name, px){
        {name}: px / $baseFontSize * 1rem;
    }
     
    //使用示例：
    .fontsize {
      px2rem('font-size', 750);
    }
     
    //stylus翻譯結果：
    .fontsize {
      font-size: 10rem;
    }