首页 前端知识 还记得PostCSS吗,看这一篇文章就够了!!!

还记得PostCSS吗,看这一篇文章就够了!!!

2024-08-14 00:08:08 前端知识 前端哥 671 35 我要收藏

背景

由于项目中的使用,又想深入了解,想着写一篇博客,以此监督自我学习 ~

那么首先,让我们带着几个问题来了解一下,PostCSS

  • PostCSS 是什么
  • PostCSS 有什么用
  • 如何使用 PostCSS

一、是什么

官方:用 JavaScript 代码来处理 CSS

那么我们根据官方的这一段话,就可以得知一些相关信息。

文档:PostCSS中文网

1.1 痛点

相较于CSS,我们经常用的less, sass和stylus这些预处理器,虽然很便利,解决了部分痛点(更具灵活性,维护性

但以下还有一些痛点困扰着我们开发者

  1. 不兼容css标准:每个预处理器都有自己的标准,并不是W3C标准,这意味着不一定兼容新的W3C标准。
  2. 不能扩展:无论哪种预处理器,都会被限制设定。
  3. 不能按需导入:如sass的@extend 功能,当你不使用它们,包的体积没有任何变化

那么在其痛点上,就延伸出例如PostCSS后处理器的插件。

1.2 处理器

以上,我们提到了预处理器,以及PostCSS后处理器,那么这又是什么?

1.2.1 预处理器(less/sass/stylus)

含义:最终生成css为目标的领域特定语言(有自己的语法)

举个栗子(less):

.sameColor(@color: '#333'){
   color: @color;
   border-color: @color;
}

.tag {
  .sameColor('#66ccff');
}

编译后

.tag {
  color: '#66ccff';
  border-color: '#66ccff';
}
  • 优点:语言级逻辑处理,动态特性,改善项目结构
  • 缺点:采用特殊语法,框架耦合度高,复杂度高

1.2.2 后处理器(PostCSS)

含义:对css进行处理,生成css的预处理器

PostCSS 使用 Autoprefixer 插件(浏览器兼容):

 #content {
   display: flex;
 }

编译后

 #content {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
  • 优点:css原生语法,容易模块化贴近css的未来标准
  • 缺点:逻辑处理有限

二、怎么用

好了,现在我们了解到,PostCSS是后处理器,可以与预处理器并存结合使用,并不冲突。

2.1 安装

首先,我们来安装一下PostCSS

npm install -g postcss-cli
npm install -g postcss

2.2 配置

其次,我们再创建一个postcss.config.js文件,将需要的插件,写入该文件中,这里我们就安装autoprefixer插件

那么下面就具体介绍的几个方法的使用,使用其中一种即可

2.2.1 方法1 (postcss.config.js )

postcss.config.js 里直接设置browsers:

module.exports = {
  plugins: [
    require('autoprefixer')({
      // 就h5使用
      remove: process.env.UNI_PLATFORM !== 'h5',
      //兼容市面所有版本浏览器
      browsers: ["> 0% "]
    }),
  ],
};

2.2.2 方法2(package.json)

package.json设置browserslist

前提,要在postcss.config.js上挂载上autoprefixer插件

"browserslist": [
   "last 2 version",
   "> 1%",
   "ie >= 8"
]
  • last 5 version:表示最新五代浏览器
  • 大于1%: 表示兼容市面上百分之九十九的浏览器

2.2.3 方法3(.browserslistrc)

实际上,这种方法与方法2(package.json),大差不差,
就是将package.json文件里的代码转移到.browserslistrc文件中。

但也前提需要先行挂载autoprefixer插件,然后在.browserslistrc文件中写入:

last 2 versions 
> 1% 
ie >= 8

2.3 命令转化

我们还可以通过PostCSS单独将代码转化一番,这里有2个方法,也是一样,选择其一即可。

2.3.1 一次性

postcss [转化的文件] -o [生成的文件]

postcss src/index.css -o css/index.css

命令执行就只执行一次,多次保存,需多次转化

2.3.2 实时监听

postcss -w [转化的文件] -o [生成的文件]

post -w src/index.css -o css/index.css

实时监听目标转化文件,进行变动转化。

注意:PostCSS不能直接转化lesssass,只能转化css,因此可将lesssass先编译为css,再进行PostCSS转化

2.4 插件使用

基于PostCSS的框架上,扩展了很多工具和插件,我们可以按需使用,进行对css进行最佳的后处理

2.4.1 autoprefixer

其实上文,我们已经了解过 autoprefixer,其作用是为 CSS 中的属性添加浏览器特定的前缀,实现各个浏览器的兼容性。

导入使用,上文已作说明,这里就不写了(见2.2配置

2.4.2 postcss-import

postcss-import插件整合其他css代码,实现css模块化。

因为PostCSS转化时不会将导入的css文件转化,所以需要配合使用postcss-import插件合并代码。

postcss.config.js中引入postcss-import,并在pluings中添加:

module.exports = {
  plugins: [
    require("postcss-import"),
    require('autoprefixer'),
  ],
};

2.4.3 postcss-cssnext:

cssnext,你可以理解为css4,里面有许多css3没有的特性(非正式标准),我们可以借助PostCSS降级到低版本css

postcss.config.js中引入postcss-cssnext,并在pluings中添加:

module.exports = {
  plugins: [
    require("postcss-cssnext"),
    require("postcss-import"),
    require('autoprefixer'),
  ],
};

转化效果:

:root {
   --text-default: #333;  
}

body {
   color: var(--text-default);
}

转化:

body {
   color: #333;
}

cssnext具体的相关使用,这里就不阐述了。

2.4.4 其他插件

  • cssnano:用来压缩代码,提高运行速度。
  • postcss-stylelint:用来检查 CSS 中可能存在的格式问题
  • postcss-font-magician:用来生成 CSS 中的 @font-face 声明
  • precss:允许在 CSS 中使用类似 SASS 的语法

还有其他更多,详细见官网:PostCSS plugins


三、感悟

PostCSS,为css开创了一条新的思路,庞大的插件体系,可以随心所欲地DIV自己的css。

而这些都是css领域的皮毛,我了解的越多越不懂,由衷地感叹互联网的技术发展迅速。

一门传世的技术,都是前人解决众多致命的痛点,创作出来的。实质上,是为了提效,解放开发人员,俗称合法偷懒。

所以为了跟上这个快节奏的社会,我们不断地奋斗躺平,奋斗躺平,我们一生都在,由简入繁,由繁入简罢了。

所以,在躺平的过程中,我们更要积攒知识,就如弓箭一般,蓄势待发。

相信在不久的将来,我们将会离开大海,去往更为广阔的天空

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15437.html
标签
postcss
评论
发布的文章

HTML5 地理定位

2024-08-20 09:08:58

HTML5 的真相(一)

2024-08-20 09:08:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!