基于 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;
    }
    原文作者:码厨师长
    原文地址: https://segmentfault.com/a/1190000018306810
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞