sass-rpx 微信小程序开发 px -> rpx 转换

微信小程序这个幺蛾子，不仅自己搞了一套所谓 WXSS 的样式表，还创造了一个新的单位 rpx。

这时候问题就来了，现在的设计稿一般基于 iPhone6（375px × 667px），势必在其他尺寸的手机中有有所不同。在手机浏览器上，为了消除差异，我们可以使用 rem 作为单位，通过改变 html 下的 font-size 来消除在不同尺寸手机上的差异，但是在微信小程序上只能通过 rpx 来消除。

在使用 sass 时，前辈们已经实现了从 px 转换到 rem 的各种轮子，其中比较赞的有 @pierreburel 所编写的 sass-rem。本文所使用的轮子也是 fork 自 sass-rem。

基于前辈们的努力，我便重写了 sass-rem，以适用于 rpx 的场景。

具体项目请参见：sass-rpx

示例

基本

SCSS

@import "rpx";

h1 {
  @include rpx(font-size, 24px); // Simple
  @include rpx(border-bottom, 1px solid black); // Shorthand
  @include rpx(box-shadow, 0 0 2px #ccc, inset 0 0 5px #eee); // Multiple values
  text-shadow: rpx(1px 1px #eee, -1px -1px #eee); // Function and multiple values
  // List support (Sass 3.3+)
  @include rpx((
    margin: 20px 1px,
    padding: 10px
  ));
}

CSS

h1 {
  font-size: 48rpx;
  border-bottom: 2rpx solid black;
  box-shadow: 0 0 4rpx #ccc, inset 0 0 10rpx #eee;
  text-shadow: 2rpx 2rpx #eee, -2rpx -2rpx #eee;
  margin: 40rpx 2rpx;
  padding: 20rpx;
}

修改设计稿类型

SCSS

@import "rpx";

$rpx-base-draft: iphone6 plus;

h1 {
  @include rpx((
    font-size: 24px,
    margin: 10px 1rpx
  ));
}

CSS

h1 {
  font-size: 48rpx;
  margin: 20rpx 1rpx;
}