教程：使用Sass/Less快速将px单位转换为rem/em/vw单位

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程 px转rem 单位转换

Sass/Less是一种CSS预处理器，可以帮助我们快速将px单位转换为rem/em/vw单位。首先，我们需要在项目中安装Sass/Less。然后，我们可以使用@function和@return指令来定义一个函数，该函数接受一个参数（例如16px），并返回相应的rem/em/vw值。接下来，我们可以使用这个函数来替换所有的px值。例如，如果我们想要将16px转换为1rem，我们可以使用这个函数：`$font-size: 16px; @function px2rem($pixels) { @return $pixels / $font-size * 1rem; } .my-class { font-size: px2rem(16); }`。这样，我们就可以轻松地将px单位转换为rem/em/vw单位了。

在响应式开发中，px单位明显不适用，最好使用rem/em/vw单位更合适，一个个的手动将PX单位修改换算成rem/em/vw单位又非常麻烦，这里菜鸡源码推荐利用Sass或less自动化将全部px单位快速的转换成rem/em/vw单位方法。

一、Sass方法

因为Sass拥有@function函数的方法，可以接收参数并返回值，less不带这个功能，推荐大家在处理px单位转换rem/em/vw单位的时候，建议优先使用Sass方法。

示例：

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

@functionpxToEm($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;}