欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

利用PostCSS跳进未来的CSS-JS-RepublicsBlog

发布时间:2016-07-28  编辑:杨雨个人博客网站   点击:   

  在说明 PostCSS是什么之前,我们先理解PostCSS不是什么。

  实质上,人们第一次听说 PostCSS时,他们倾向于认为这是一款新出的CSS预处理器,类似SASS、LESS和Stylus。

  如果你想把它当作预处理器来用,那么它会如预处理器那样工作。同时它也有后处理器、优化工具、兼容未来语法的插件......你想要的功能应有尽有。

  PostCSS的主要目的是能让你使用各种工具满足你的需要。

  所以你应该把 PostCSS当作一个构建工具。它能让你用各类JavaScript插件来维护你的CSS。 这些插件可以在http://postCss.parts 这里找到

  由于有太多的插件,我们将通过这篇文章检阅一下那些常用和强大的插件。

  同时你也会了解到如何搭配使用Gulp创建一个单任务来处理CSS文件。

  Autoprefixer

  如果你之前曾用过预处理器,你该体验到不必再写前缀是件多么愉悦的事。

  举个例子,不必再这样写

:-webkit-full-screen a {
 display: -webkit-box;
 display: flex
}
:-moz-full-screen a {
 display: flex
}
:-ms-fullscreen a {
 display: -ms-flexbox;
 display: flex
}
:fullscreen a {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex
}

  只需

:fullscreen a {
 display: flex
}

  如果你想自己动手试试,可以用这个可互动demo http://autoprefixer.github.io

  文档戳这里:https://github.com/postCss/autoprefixer

  PreCSS

  即使PostCSS本不是SASS那样的预处理器,但你依然能通过一些插件来处理Sass类格式的文件。

  首选的插件是PreCSS,它集合了大量的PostCSS插件 ,让你可以编写Sass语法的样式。

  我邀请你阅读 文档来了解更多细节,也可以玩玩这个可互动 demo 来测试各种可能性。

  CssNext

  CSS4,下一代CSS,承诺将改变CSS的书写方式和选择器的使用方式。

  遗憾的是,这个版本的规范依然在制定中,并且尚未公布发行时间。

  幸运的是,如果你想使用下一代CSS的一些功能,这里有款叫CssNext的插件能帮助你。

  CSSNext的官网列出了所有支持的功能: http://Cssnext.io/features/

  你也可以在这里玩玩:http://Cssnext.io/playground/

  CssNano

  最后但同样重要的,关于优化。CssNano能利用不同的modules压缩和优化你的CSS代码。

  我推荐你禁用the z-index,因为它很可能会扰搞乱你原本正常的z-index。

  你可以检阅这份可优化列表:http://Cssnano.co/optimisations/ 你也可以在Gitter上和CssNano的创造者聊聊:https://gitter.im/ben-eb/Cssnano

  现在,我们看看如何利用Gulp使用这些插件。

  Gulp x PostCSS

  Gulp

  首先,以dev dependencies 的方式安装Gulp、Gulp Load Plugins 和Gulp PostCSS 。在控制台执行以下命令:

npm i -D gulp gulp-load-plugins gulp-postCss

  在你需要使用Gulp的地方创建一个 gulpfile.js 并加入如下代码。

var gulp = require('gulp'),

  添加 Gulp Load PLugins的代码:

$ = require('gulp-load-plugins')();

  Gulp Load Plugins依赖会 通过$调用你需要的插件。

  PostCSS

  接下来,同样以dev dependency的方式需要安装所需要的PostCSS插件

npm i -D autoprefixer Cssnano Cssnext preCss

  安装好后加入到gulpfile.js

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
Cssnext = require('Cssnext'),
preCss = require('preCss'),
Cssnano = require('Cssnano');

  接下来开始写 Gulp CSS任务

// Gulp task to process CSS with PostCSS plugins 
gulp.task('Css', function() {

 });

  在这个任务中,我们首先用一个变量来保存准备用到的PostCSS插件

var processors = [autoprefixer, Cssnext, preCss, Cssnano({zindex: false})];

  设置CssNano的 zindex:false 禁止其重设我们的 z-index。

  为了处理CSS文件,我们需要检索如下文件:

return gulp.src('./source/Css/style.Css')

  然后通过processors变量内的PostCSS插件来处理CSS文件。

  使用pipe方法串联起处理过程

.pipe($.postCss(processors))

  用如下代码输出处理完成的文件

.pipe(gulp.dest('./public/assets/stylesheets'));

  以上全部,就是你使用PostCSS 插件处理CSS时所要做的事。

var gulp = require('gulp'),
$ = require('gulp-load-plugins')();

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
Cssnext = require('Cssnext'),
preCss = require('preCss'),
Cssnano = require('Cssnano');

// Gulp task to process CSS with PostCSS plugins
gulp.task('Css', function() {
var processors = [autoprefixer, Cssnext, preCss, Cssnano({zindex: false})];

return gulp.src('./source/Css/style.Css')
.pipe($.postCss(processors))
.pipe(gulp.dest('./public/assets/stylesheets'));
});

  在 Tuts+上有份完整且详细的指南,我强烈推荐你读读:http://webdesign.tutsplus.com/series/postCss-deep-dive–cms-889

  我也利用这些PostCSS插件创造了一份boilerplate样板,可以帮你快速上手: https://github.com/PierrickGT/PCGB

  http://blog.js-republic.com/jump-into-the-future-of-Css-with-postCss/

本文地址:http://itbyc.com/web/css3/10570.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1