如何用 Sass / Less 实现单位转换 (px to rem/em/vw)

移动端开发中，常常需要根据 UI 的设计稿做出适配移动端的网页，然而设计稿常常是以像素（px）为单位的，于是需要利用 CSS 预编译器 Sass / Less 来进行转化。

一、Sass

Sass 拥有类似于传统编程语言的函数 @function，可以接收参数并返回值。

示例：

在父元素字体大小为 12px 的容器内绘制图形交互。

@function pxToEm ($px) {
  @return ($px/12) + em;
}

# Sass
.box {
    width: pxToEm(36);
}

# CSS
.box {
    width: 3em;
}

二、Less

Less 的函数全是内置的并不能自定义，所以只能迁就一下使用混合（Mixins）来实现转换逻辑的复用。

示例：

将宽度为 375px 的 UI 设计稿转换成使用单位 vw 来适配移动端的网页。

.pxToVW (@px, @attr: width) {
    @vw: (@px / 375) * 100;
    @{attr}: ~"@{vw}vw";
}

# Less
.box {
    .pxToVW(75);
    .pxToVW(150, height);
}

# CSS
.box {
    width: 20vw;
    height: 40vw;
}

三、参考

• 学习Less-看这篇就够了
• 移动端适配（px转vw）（postcss-px-to-viewport配置）