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 ; } |
安装依赖
运行
npx
是高版本node可以使用的
这样就能转换一个新css文件,然而并没有啥变化
使用第三方插件autoprefixer
Autoprefixer是一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里
主要用于处理兼容性问题
可以查看浏览器前缀信息
运行
在-u 后面加上插件
如果觉得以上运行方式太垃,那我们就开启新的方式吧!!!
使用第三方插件postcss-preset-env
postcss-preset-env是一个兼容浏览器,给一些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 | 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的插件
然后就可以正常使用了
本来是这样的:
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中进行配置简化该运行命令!!