PostCSS是什么?官网如是介绍:
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
我的理解就是一个借助JS插件来根据相应规则转化CSS文件为可用文件的一个工具。
那么,它是Sass吗?
是,也不是;他可以完成Sass的功能,但因其插件的广泛,所以可以实现比Sass更多的功能。
不如看一下他可以做什么。
首先安装环境依赖
npm install gulp gulp-postcss autoprefixer cssnext precss --save-dev
- 1
然后在根目录下新建文件夹src并新建blog-demo.css文件
//blog-demo.css/*测试Precss*/.precss { color: red; font-size: 14px; .child1 { color: green; } &.active { font-weight: bold; } &:hover { font-size: 18px; }}/*测试cssnext*/.cssnext{ color: color(red alpha(-10%));}/*测试autoprefixer*/.autoprefixer{ display:flex;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
编写gulp任务-demo
//gulpfile.jsvar gulp = require("gulp");var postcss = require("gulp-postcss");var autoprefixer = require("autoprefixer");var cssnext = require("cssnext");var precss = require("precss");gulp.task("demo", function(){ var processors = [ precss, cssnext, autoprefixer ]; return gulp.src("./src/blog-demo.css") .pipe(postcss(processors)) .pipe(gulp.dest("./dist"))})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
运行gulp demo
命令,便会在根目录的dist文件夹下生成blog-demo.css文件:
/*测试Precss*/.precss { color: red; font-size: 14px;}.precss .child1 { color: green; }.precss.active { font-weight: bold;}.precss:hover { font-size: 18px;}/*测试cssnext*/.cssnext{ color: rgba(255, 0, 0, 0.9);}/*测试autoprefixer*/.autoprefixer{ display:-webkit-box; display:-ms-flexbox; display:flex;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
刚才所说:“我的理解就是一个借助JS插件来根据相应规则转化CSS文件为可用文件的一个工具。“
以上使用了三个常用插件,分别是precss,功能与sass差不多处理逻辑与嵌套;cssnext主要是转化未来的css语法为当前可用的语法,具体可参考官网;autoprefixer,顾名思义是用来加各个浏览器前缀,便于浏览器渲染识别。
本文github地址
更多参考链接:
以上内容属于作者个人观点,如有错误,欢迎指正交流。
以下扯淡环节
叫初探postcss是因为技术比较新吗?不是,在网上的资料15年已经很多了,所以出现时间应更早。。
说是初探是因为本人最近刚知道,抱着一种“探”的态度来学习了一下这门技术。感觉还不错,功能挺多也挺实用的,但实际工作中没有使用也有些许遗憾,但让人遗憾的是”你不知道你不知道的“,以后就少了更多实(zhuang)用(bi)技巧。应该多看看外面的世界。
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow