PostCSS
postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：
1 . 使用下一代css语法
2 . 自动补全浏览器前缀
3 . 自动把px代为转换成rem
4 . css 代码压缩等等
使用
创建好项目并且初始化npm init -y
创建一个页面，一个css
|-------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <``html lang``=``"en"``> <``head``> ``<``meta charset``=``"UTF-8"``> ``<``meta http-equiv``=``"X-UA-Compatible" content``=``"IE=edge"``> ``<``meta name``=``"viewport" content``=``"width=device-width, initial-scale=1.0"``> ``<``title``>PostCSS</``title``> ``<``link rel``=``"stylesheet" href``=``"./index.css" rel``=``"external nofollow" > </``head``> <``body``> ``<``div class``=``"box"``> ``<``div class``=``"box_1"``>盒子1</``div``> ``<``div class``=``"box_2"``>盒子2</``div``> ``<``div class``=``"box_3"``>盒子3</``div``> ``</``div``> </``body``> </``html``> |
css
|-------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | body{ ``background-color``: ``black``; } .box{ ``display``: flex; ``justify-``content``: space-between; ``text-align``: ``center``; } .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``font-size``: ``18px``; ``&:hover{ ``background-color``: ``blue``; ``} } .box_``2``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: yellow; } .box_``3``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``blue``; } |
安装依赖
npm i postcss postcss-cli
运行
npx是高版本node可以使用的
npx postcss 源文件名.css -o 编译后的文件名.css
这样就能转换一个新css文件，然而并没有啥变化
使用第三方插件autoprefixer
Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里
主要用于处理兼容性问题
可以查看浏览器前缀信息
npx autoprefixer --info
运行
在-u 后面加上插件
npx postcss index.css -o dist.css -u autoprefixer
如果觉得以上运行方式太垃，那我们就开启新的方式吧!!!
使用第三方插件postcss-preset-env
postcss-preset-env是一个兼容浏览器,给一些css加上前缀的插件
npm i --dev postcss-preset-env
运行后可以发现会自动给你做兼容性处理
源代码:
|----------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | body{ ``background-color``: ``black``; } .box{ ``display``: flex; ``justify-``content``: space-between; ``text-align``: ``center``; } .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``&:hover{ ``background-color``: ``blue``; ``} } .box_``2``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: yellow; } .box_``3``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``blue``; } |
编译后
|-------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | body{ ``background-color``: ``black``; } .box{ ``display``: -webkit-box; ``display``: -webkit-flex; ``display``: -moz-box; ``display``: -ms-flexbox; ``display``: flex; ``-webkit-box-pack: ``justify``; ``-webkit-justify-``content``: space-between; ``-moz-box-pack: ``justify``; ``-ms-flex-pack: ``justify``; ``justify-``content``: space-between; ``text-align``: ``center``; } .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``font-size``: ``1.125``rem; } .box_``1:``hover{ ``background-color``: ``blue``; ``} .box_``2``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: yellow; } .box_``3``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``blue``; } |
是不是觉得很方便很beautiful~
使用第三方插件postcss-pxtorem
它是一款自动将px转rem的插件
npm i --dev postcss-pxtorem
然后就可以正常使用了
本来是这样的:
|-------------|---------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``font-size``: ``18px``; ``} |
用了它就这样了:
|-------------|----------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``font-size``: ``1.125``rem; } |
Is so good!!!
上方插件就演示这么多了，再介绍一下如何方便的运行:
运行的新方式
创建config文件
postcss.config.js
|----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 | const postcssPresetEnv=require(``'postcss-preset-env'``) module.exports={ ``plugins: [ ``require(``"autoprefixer"``), ``postcssPresetEnv({ ``stage:0 ``}), ``require(``"postcss-pxtorem"``),``//单位转换 ``] } |
这样就能使用了
通过npx postcss 源文件名.css -o 编译后文件名.css
如果还觉得繁琐可以在package.json中进行配置简化该运行命令!!