移动端mixin的px转rem

来源：互联网发布：visio中文版mac下载编辑：程序博客网时间：2024/05/20 03:41

1、多属性传递

@mixin px2rems($pxs){    @each $key, $value in $pxs{        #{$key}: $value/$baseFontSize * 1rem;    }}

使用例子：

.a{@include px2rems((font-size: 28,height: 90,line-height: 90,padding-left: 20,padding-right: 20));}

生成css

.a {  font-size: 0.37333rem;  height: 1.2rem;  line-height: 1.2rem;  padding-left: 0.26667rem;  padding-right: 0.26667rem; }

2、属性多值传递

@mixin remCalc($property, $values...) {    $max: length($values);    $remValues: '';    @for $i from 1 through $max {        $value: nth($values, $i);        $remValues: #{$remValues + $value/$baseFontSize}rem;        @if $i < $max {            $remValues: #{$remValues + " "};        }    }    #{$property}: $remValues; }

使用例子：

.a{@include remCalc(padding,10,20);}

生成css

padding: 0.13333rem 0.26667rem;

注意：文中$baseFontSize为不同设计稿的值，一般750px设计稿为75，即设计稿宽度/10的值

0 0