博客 / 詳情

返回

基於 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;
    }
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.