如何用 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;
}

三、参考

发表评论

电子邮件地址不会被公开。 必填项已用*标注