背景
由于项目中的使用,又想深入了解,想着写一篇博客,以此监督自我学习 ~
那么首先,让我们带着几个问题来了解一下,PostCSS
- PostCSS 是什么
- PostCSS 有什么用
- 如何使用 PostCSS
一、是什么
官方:用 JavaScript 代码来处理 CSS
那么我们根据官方的这一段话,就可以得知一些相关信息。
文档:PostCSS中文网
1.1 痛点
相较于CSS,我们经常用的less, sass和stylus这些预处理器,虽然很便利,解决了部分痛点(更具灵活性,维护性)
但以下还有一些痛点困扰着我们开发者
- 不兼容css标准:每个预处理器都有自己的标准,并不是W3C标准,这意味着不一定兼容新的W3C标准。
- 不能扩展:无论哪种预处理器,都会被限制设定。
- 不能按需导入:如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
不能直接转化less
和sass
,只能转化css,因此可将less
和sass
先编译为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领域的皮毛,我了解的越多越不懂,由衷地感叹互联网的技术发展迅速。
一门传世的技术,都是前人解决众多致命的痛点,创作出来的。实质上,是为了提效,解放开发人员,俗称合法偷懒。
所以为了跟上这个快节奏的社会,我们不断地奋斗躺平,奋斗躺平,我们一生都在,由简入繁,由繁入简罢了。
所以,在躺平的过程中,我们更要积攒知识,就如弓箭一般,蓄势待发。
相信在不久的将来,我们将会离开大海,去往更为广阔的天空