前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【说站】Vue框架在PostCSS中使用sass的方法

【说站】Vue框架在PostCSS中使用sass的方法

作者头像
很酷的站长
发布2022-11-24 11:21:36
5400
发布2022-11-24 11:21:36
举报
文章被收录于专栏:站长的编程笔记

Vue框架在PostCSS中使用sass的方法

使用PostCss的原因

大家都知道转换px单位的插件很多,著名的有postcss-px-to-viewport和postcss-pxtorem,前者是将px转换为vw,后者是将px转换为rem,简化了不常用的配置。将成为vw优先单位,以rem为退货模式。考虑到vw在移动设备上的支持不如rem,这个插件很好的解决了这个问题。然后简单介绍一下。

安装指令

代码语言:javascript
复制
 $ npm install @ moohng / postcss-px2vw --save-dev

使用方法

首先创建一个.postcssrc.js文件,然后配置

代码语言:javascript
复制
module.exports = {
  plugins: {
    '@moohng/postcss-px2vw': {}
  }
}

例子: 使用前:

代码语言:javascript
复制
.box {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}

使用后:

代码语言:javascript
复制
.box{
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 0.625rem;
  font-size: 6.25vw;
  line-height: 0.9375rem;
  line-height: 9.375vw;
}

配置方面

viewportWidth:对应设计图的宽度,用于计算 vw。默认 750,指定 0 或 false 时禁用 rootValue:根字体大小,用于计算 rem。默认 75,指定 0 或 false 时禁用 unitPrecision:计算结果的精度,默认 5 minPixelValue:小于等于该值的 px 单位不作处理,默认 1 注意:该插件只会转换 px 单位。rootValue 一般建议设置成 viewportWidth / 10 的大小,将设计图分成10等分。由于浏览器有最小字体限制,如果设置得过小,页面可能跟预期不一致

如果要使用 rem 单位,需要自己通过 js 来动态计算根字体的大小。如果将设计图分成 10 等分计算,那么根字体的大小应该是 window.innerWidth / 10。

这样一个postCss的插件就配置完成了。

以上就是Vue框架在PostCSS中使用sass的方法,希望对大家有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue框架在PostCSS中使用sass的方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档