基于 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;
    }