问答详情
源自:8-1 课程总结

关于compass sprites 将px转化为rem值

请问各位大神 ,目前移动前端开发都是rem适配,如何将 生成的 图片宽高变为对应rem值,可有配置项??如果没有的话,总不能每次修改编译完再修改一次吧。。。

提问者:qq_独行者_4 2016-05-16 23:48

个回答

  • chiji1357
    2016-05-18 16:57:55
    已采纳

    //下面这段代码加到你的sass文件中就可以改写sprite-dimensions这个函数从而得到rem单位的宽高
    //html根目录文字大小我一般设为10px

    $htmlFontSize: 10px;

    html{

    font-size: $htmlFontSize;

    }

    @function strip-unit($number){

        @return $number / ($number*0 +1);

    }

    @function add-rem-unit($number){

         $htmlfs: strip-unit($htmlFontSize);

         $num: strip-unit($number);

         @return  ($num / $htmlfs)* 1rem;

    }


    @mixin sprite-dimensions($map, $sprite) {

          height: add-rem-unit(image-height(sprite-file($map, $sprite)));

          width: add-rem-unit(image-width(sprite-file($map, $sprite)));

    }