PostCSS长远学习,你须求精通怎样
分类:前端技术

PostCSS深入学习:设置选项

2015/10/28 · CSS · POSTCSS

原文出处: Kezz Bracey   译文出处:大漠   

欢迎开启我们PostCSS深入学习系列之快入门指南。在这些初级教程中,可以让我们快速的了解PostCSS和如何最有效的使用PostCSS。

在这篇文章中,我们将先告诉你如何设置PostCSS选项,所以你现在开始使用PostCSS只要几分钟。接下来将告诉你如何在Codepen和Prepros中设置PostCSS。

马上让我们看看如何开始玩PostCSS。

PostCSS深入学习:Gulp设置

2015/10/28 · CSS · POSTCSS

原文出处: Kezz Bracey   译文出处:大漠   

在上一篇文章中,我们介绍了如何在CodePen和Prepros中使用PostCSS。虽然里面的选项设置可以让你第一时间接触和使用PostCSS,但也有很多PostCSS插件限制你不能使用。

这篇教程将告诉你如何在Gulp配置中使用PostCSS插件,而且可以根据你自己需要的去配置所要的插件。这才是真正的进入到PostCSS插件生态系统中。

特别声明:如果你从未接触或使用命令来配置Gulp的任务,我建议你在阅读本教程之前先阅读前面我写的系列教程:《网页设计的命令操作》。

PostCSS-Comn

PostCSS-Comn使用说明,整合PostCSS常用功能
GitHub:https://github.com/NalvyBoo/PostCSS-Comn

PostCSS深入学习:你需要知道什么

2015/10/28 · CSS · POSTCSS

原文出处: Kezz Bracey   译文出处:大漠   

如果你想真正的知道PostCSS的话,你就应该尽快学会PostCSS是什么以及如何使用它。

在这个系列中,我们将带你深入了解PostCSS以及如何使用PostCSS方法。如果你还没有做好思想准备去了解PostCSS能做什么,那么可以跟着这个系列进入学习,这个系列将带你进入到CSS的新世界之中。

CodePen中设置PostCSS

如果你是第一次接触PostCSS,那么通过CodePen来使用它是最快方式。

CodePen已预先集成了PostCSS,并且还支持下面所列的PostCSS插件:

  • cssnext
  • postcss-simple-vars
  • postcss-discard-comments
  • postcss-custom-media
  • postcss-media-minmax
  • postcss-conditionals
  • postcss-each
  • postcss-for
  • postcss-nested
  • postcss-transform-shortcut

这些插件可以让你支持未来的CSS语法、像Sass一样的函数、注释的删除和代码的缩写等等。

首先在CodePen在线编辑器上点击”NewPen“创建一个新的页面。然后单击CSS窗口左上角的小齿轮图标,在弹出的面板中设置。

图片 1

单击“CSS Preprocessor”下拉选项,你可以选择下拉选项中的“PostCSS”选项。你也可以在”Vendor Prefixing“中选择“Autoprefixer”插件。

图片 2

然后你可以点击“Need an add-on”按钮,在弹出的面板中选择你需要的插件。在弹出的面板将会显示@规则插件,复制粘贴这些@规则对应的PostCSS插件到你的CSS面板中,并且开始使用。

图片 3

需要的条件

鉴于我们将需要使用Gulp,在开始后面的内容之前,我假设你的电脑本地环境已经具备了下面列出来的条件:

  • node.js
  • NPM
  • Git

如果你无法确认你的电脑本地系统是否安装了这些,建议你跟着这篇教程操作一回,因为这些条件是我们进入教程后面必备条件。

当然你也可以先阅读这篇教程,确保你对Gulp的基本操作有所了解。此外,按照教程中的“Gulp安装项目”部分,确保你的项目文件夹中有以下面所列文件:

  • 一个gulpfile.js文件
  • 一个package.json文件
  • 根据项目所需安装依赖模块,运行gulp install会有一个node_modules文件夹

插件作用

  • 支持CSS未来语法
  • 自动补全浏览器私有前缀
  • CSS预处理(整合Sass、LESS或Stylus功能,语法基本和Sass的相同)
  • 通过@import,整合多个CSS文件
  • 将相同的CSS媒体查询规则合并为一个
  • 压缩CSS文件
  • 给rgba颜色创建降级方案(添加备用颜色)
  • 给opacity提供降级方案(给IE浏览器添加滤镜属性)
  • 让IE8支持rem单位
  • 将伪元素的::转换为:(IE8不支持::)

PostCSS入门

PostCSS在以惊人的速度发展,而且越来越受人欢迎。越来越多的人开始在了解它,使用它。因为他们意识到,在项目中使用PostCSS让他们意识到了眼前一亮。

图片 4

2014年总共不到140万的下载量,但从2015年1月份到6月份已经超过380万个下载。

Autoprefixer是PostCSS中最流行的插件,其中Google、Shopify、Twitter、Bootstrap和Codepen都在使用这个插件。Wordpress也使用Autoprefixer插件,而且还使用RTLCSS插件。Alibaba使用了几个PostCSS插件,以及也参加PostCSS的开发。

除此之外,Mark Otto也谈到将在Bootstrap v5中引入PostCSS:

Oh, btw—Bootstrap 4 will be in SCSS. And if you care, v5 will likely be in PostCSS because holy crap that sounds cool.——@Mark Otto

PostCSS刚刚被CodePen.io引用,可以通过CSS设置中设置:

图片 5

PostCSS正在增长,是快速的增长,而且没有充分的理由。

CodePen用法的例子

让多们看看如何在CodePen中使用PostCSS的插件cssnext示例。

在CSS面板顶部,添加你想要的cssnext插件代码:

@use cssnext;

1
@use cssnext;

有了这条代码,你将可以使用cssnext官网上描述的所有功能特性。比如,我们使用CSS的变量和函数给body设置一个background颜色。

首先,使用:root定义CSS变量。在CSS面板中添加像下面这样的代码:

:root { --body_bg_color: black; }

1
2
3
:root {
  --body_bg_color: black;
}

可以像下面的代码那样调用CSS的变量:

body { background: var(--body_bg_color); }

1
2
3
body {
  background: var(--body_bg_color);
}

这个时候你应该看到了预览面板上的背景颜色变成了black。你也可以点击CSS面板右上角的”View Compiled“按钮看到生成的代码:

图片 6

接下来,假设我们想让背景颜色不要是全黑色,想变亮一点。我们可以使用未来的语法修改颜色。

在上面声明的CSS变量中,修改--body_bg_color变量值,从black变成:

--body_bg_color: color(black lightness(20%));

1
--body_bg_color: color(black lightness(20%));

这是一个lightness()函数,在black颜色上调20%的亮度,这个时候你可以看到背景颜色从黑色变成了深灰色。

图片 7

可以在CodePen以这种方式使用任何支持的PostCSS插件:

  • PostCSS长远学习,你须求精通怎样。通过@规则引入你想要的使用的PostCSS插件
  • 根据插件的指令在CSS面板中使用(在上面你能找到对应插件使用说明的链接地址)

下面就是我们前面在CodePen中使用PostCSS得到的最终效果:

链接地址

扩展教程

其实这些内容在网上一搜一大把,为了初学者更好的阅读接下的内容,这里提供一些参考文档。

  • 在 Windows、Mac OS X 與 Linux 中安裝 Node.js 網頁應用程式開發環境
  • Node.js 安装配置
  • NPM 套件管理工具
  • Gulp开发教程
  • 前端构建工具gulp入门教程

使用说明

  1. 全局安装Gulp
  2. 复制仓库文件到项目目录(PostCSS文件夹 内的内容)
  3. 命令终端运行:npm install(淘宝镜像使用该命令:cnpm install
  4. src文件夹 为编辑源文件,css文件夹 为生成代码文件
  5. src文件夹 目录下命令终端运行:gulp css
  6. css文件夹 内查看编译后结果

简而言之

PostCSS是什么?最好的定义来自于PostCSS自身项目在github上的描述:

“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

简而言之,PostCSS是CSS变成JavaScript的数据,使它变成可操作。PostCSS是基于JavaScript插件,然后执行代码操作。PostCSS自身并不会改变CSS,它只是一种插件,为执行任何的转变铺平道路。

本质上是没有很制PostCSS插件操纵CSS,也就是说它可以适用于任何CSS。只要你能想到的,你都可以编写一个PostCSS插件,让它来转成CSS。

PostCSS插件可以像预处理器,它们可以优化和autoprefix代码;可以添加未来语法;可以添加变量和逻辑;可以提供完整的网格系统;可以提供编码的快捷方式……还有很多很多。

在Prepros中使用PostCSS

Prepros中可能没有像CodePen中那么多插件可使用,但它包括了Autoprefixercssnext插件,可以在Prepros面板中选中,从而激活对应的PostCSS插件。你可以点击这里下载Prepros。

打开Prepros面板,可以将项目拖到面板中,而且这个面板包括一个CSS文件。然后点击CSS文件,将会在右边打开一个设置面板。在这个面板中你可以看到Prepros支持的PostCSS插件,你可以选择你想用的PostCSS插件。比如说你选择Autoprefixercssnext表示你使用了PostCSS这两个插件。

图片 8

如上图所示,你现在可以使用cssnext插件的所有功能以及Autoprefixed插件功能。

PostCSS在Gulp中的基本配置

首先在你的项目中创建两个文件夹,一个命名为src,另一个命名为destsrc文件夹用来放置未处理的CSS文件,而dest用来放置PostCSS插件处理后的文件。

接下来需要做的就是在你的项目中安装gulp-postcss插件,安装好之后就可以使用POstCSS处理器。

在安装之前,配置一下package.json文件:

JavaScript

{ "name": "testPostCSS", "version": "0.0.1", "description": "test PostCSS gulp plugin", "keywords": [ "gulpplugin", "PostCSS", "css" ], "author": "damo", "license": "MIT", "dependencies": { "postcss": "^5.0.0", "gulp": "~3.8.10" }, "devDependencies": { "gulp-postcss": "^6.0.1" } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "testPostCSS",
  "version": "0.0.1",
  "description": "test PostCSS gulp plugin",
  "keywords": [
    "gulpplugin",
    "PostCSS",
    "css"
  ],
  "author": "damo",
  "license": "MIT",
  "dependencies": {
    "postcss": "^5.0.0",
    "gulp": "~3.8.10"
  },
  "devDependencies": {
    "gulp-postcss": "^6.0.1"
  }
}

打开你的命令终端,并且进入到你的项目根目录下,然后在命令终端输入下面的命令:

JavaScript

npm install --save-dev gulp-postcss

1
npm install --save-dev gulp-postcss

注:如果上面命令无法正常安装,建议在上面的命令前加上sudo

JavaScript

sudo install --save-dev gulp-postcss

1
sudo install --save-dev gulp-postcss

运行完上面命令之后,如果没出任何差错,在你的终端命令中可以看到类似下图的提示:

图片 9

安装完成后你的项目结构看起来就应该像这样:

图片 10

现在通过编辑器打开gulpfile.js文件,并且创建gulpgulp-postcss变量,如下面代码所示:

JavaScript

var gulp = require('gulp'); var postcss = require('gulp-postcss');

1
2
var gulp = require('gulp');
var postcss = require('gulp-postcss');

我们现在可以设置一个任务,让PostCSS读取CSS原文件并且处理它。

添加的代码如下:

JavaScript

gulp.task('css', function () { var processors = [ ]; return gulp.src('./src/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dest')); });

1
2
3
4
5
6
7
gulp.task('css', function () {
  var processors = [
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

我们一起来看一下上在的代码。在第一行,设置了一个任务名叫css。这个任务将会执行一个函数,同时在这个函数中创建了一个名为processors的数组。现在这个数组为空,这里将插入我们想使用的PostCSS插件。

processors数组后面,我们指定了需要处理的目标文件,即src目录中的任何CSS文件。

这里面使用了两个.pipe()函数,设置postcss()执行PostCSS,并且给postcss()传递processors参数,后面会告诉PostCSS要使用哪个插件。

接下来的第二个.pipe()函数,指定结过PostCSS处理后的CSS放置在dest文件夹中。

语法介绍

  • PreCSS语法介绍

PostCSS不是什么

事实上,使用PostCSS插件你可以做任何你想做的任何事情,但PostCSS相对而言还是较新,这也导致了一些误解,工具实际上是什么。

许多人(包括我自己在内)对PostCSS没有一个完整的印象,PostCSS实际是什么,并因此错过了PostCSS可以提供什么。

所以在我们继续往下阅读之前,让我们澄清一些事情,PostCSS不是什么?

总结一下

好吧,快速将上面的内容做个总结:

  • 试着在CodePen或Prepros中使用PostCSS
  • CodePen中提供了PostCSS十个插件
  • 在CodePen中的CSS面板中激活PostCSS插件,然后通过引入@规则,就可以使用特定的PostCSS插件
  • Prepros提供了Autoprefixer和cssnext插件
  • 在Prepros中点击项目中任何CSS文件可以设置PostCSS给Prepros提供的PostCSS插件

测试编译

src目录中创建一个测试文件style.css,并在这个文件中添加一些CSS的测试代码:

JavaScript

.test { background: black; }

1
2
3
.test {
    background: black;
}

现在在命令终端的项目目录下执行下面的命令:

JavaScript

gulp css

1
2
gulp css
 

图片 11

这是刚才设置的任务,执行完上面的任务之后,在dest目录中可以找到一个新的style.css文件。

当你打开这个新文件后,你可以看到和你的源文件一样的代码。使用的代码并没有任何的改变,那是因为我们还没有使用任何的PostCSS插件。从先前的教程中,你就会知道它的插件实际上是会对CSS执行操作的。

以下内容为自定义进阶

PostCSS不是预处理器

许多开发人员说他们不愿意放弃当前使用的CSS预处理器来支持PostCSS。与此同时,他们更喜欢预处理器而不喜欢PostCSS。而事实上是,PostCSS并不是一个预处理器

是的,如果你愿意,你完全可以把它当作为一个预处理器,但你绝对没有像使用预处理器那些功能。你甚至可以继续使用你最喜欢的预处理器,并且能结合PostCSS一起使用。

下一节:集成任务

CodePen和Prepros可以通过设置启用PostCSS插件。然而不利的一面是,你无法决定使用哪个插件。

当你准备使用PostCSS更多你想要的插件时,可以通过配置自己选择的插件。最容易的方法是通过gulp或grunt设置需要的PostCSS插件任务,并且让其跑起来。

在下一节中,你将可学习到如何在Glup或Grunt中配置PostCSS插件任何,并且让其跑起来为你所用。感兴趣的同学,欢迎持续关注接下来的内容。(^_^)。

1 赞 1 收藏 评论

图片 12

添加PostCSS插件

现在我们添加需要的PostCSS插件:Autoprefixer(处理浏览器私有前缀),cssnext(使用CSS未来的语法),precss(像Sass的函数)。

运行下面的命令,将插件安装到你的项目:

JavaScript

npm install autoprefixer --save-dev npm install cssnext --save-dev npm install precss --save-dev

1
2
3
4
npm install autoprefixer --save-dev
npm install cssnext --save-dev
npm install precss --save-dev
 

其实也可以在命令中执行下面的代码,也可以达到相同的效果:

JavaScript

npm install autoprefixer cssnext precss --save-dev

1
npm install autoprefixer cssnext precss --save-dev

注:安装cssnextprecss时需要一段时间,因为他们包括了多个插件。

接下来,在我们的项目中定义变量,将这些插件加载到我们的项目中。和前面的方式一样,在gulpfile.js文件中添加下面的代码:

JavaScript

var autoprefixer = require('autoprefixer'); var cssnext = require('cssnext'); var precss = require('precss');

1
2
3
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');

然后将这三个插件添加到processors数组中,更新后的数组如下:

JavaScript

var processors = [ autoprefixer, cssnext, precss ];

1
2
3
4
5
var processors = [
  autoprefixer,
  cssnext,
  precss
];

三个插件已结添加到了processors数组中了,这个时候PostCSS会知道将这些插件功能应用到我们的CSS源文件中。

我们现在可以给src/style.css文件中添加一些测试文件和检测他们的工作。删除测试文件中以前的代码,并添加新的CSS样式代码:

JavaScript

/* Testing autoprefixer */ .autoprefixer { display: flex; } /* Testing cssnext */ .cssnext { background: color(red alpha(-10%)); } /* Testing precss */ .precss { <a href='; 3 < 5 { background: green; } @else { background: blue; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Testing autoprefixer */
 
.autoprefixer {
  display: flex;
}
 
/* Testing cssnext */
 
.cssnext {
  background: color(red alpha(-10%));
}
 
/* Testing precss */
 
.precss {
  <a href='http://www.jobbole.com/members/jinyi7016'>@if</a> 3 < 5 {
    background: green;
  }
  @else {
    background: blue;
  }
}

在命令终端执行gulp css命令。在dest目录生成的文件会有下面的代码:

JavaScript

/* Testing autoprefixer */ .autoprefixer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /* Testing cssnext */ .cssnext { background: rgba(255, 0, 0, 0.9); } /* Testing precss */ .precss { background: green }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Testing autoprefixer */
 
.autoprefixer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
 
/* Testing cssnext */
 
.cssnext {
  background: rgba(255, 0, 0, 0.9);
}
 
/* Testing precss */
 
.precss {
  background: green
}

如上面编译出来的代码你应该看到了Autoprefixer给需要的属性添加了浏览器的私有前缀,第二个任务cssnext将颜色转换成rgba(),第三部分PreCSS检查了@if @else,编译符合需求的代码。

PostCSS-Comn插件扩展

以扩展postcss-will-change插件为例

安装插件 项目目录下执行命令行

$ npm install postcss-will-change --save-dev

配置gulpfile.js文件

// 添加此行
var will_change = require('postcss-will-change');

gulp.task('css', function () { 
    var processors = [
        // 添加此行
        will_change
    ]; 
});

完成 执行命令查看效果

gulp css

PostCSS不是后处理器

PostCSS名称中有一个”post”单词,但它不是一个真正的”后处理器“。后处理器通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效,常做的一件事情就是给CSS属性添加浏览器私有前缀。然而,PostCSS并不局限于这种操作。正如上面提到的,它可以像一个预处理器。

最好的也就是视PostCSS为处理器。PostCSS创造者Andrey Sitnik在Twitter上这样描述的:

It is time admit my mistakes. “Postprocessor” term was bad. PostCSS team stoped to use it.https://github.com/postcss/postcss …

Maxime Thirouin作为PostCSS贡献者和插件开发人员,他在Twitter上说,PostCSS中的”post”指的是加工,它可以让CSS变得更好,甚至是超越CSS。

It’s not post-processing if it happens before hitting the browser. @prefixfree is a post-processing tool. @PostCSS is not.——by @HugoGiraudel


@HugoGiraudel nobody in postcss contributors is using this expression anymore. Now it is Postcss like “css and beyond” —— by @MoOx

设置插件的选项

注:如果你想为一个插件配置选项参数,你可以在插件后面添加一对括号,并在里面传递选项的参数。例如,Autoprefixer需要指定对应的浏览器列表参数,你可以像这样设置:

JavaScript

var processors = [ autoprefixer({browsers: ['last 1 version']}), cssnext, precss ];

1
2
3
4
5
var processors = [
  autoprefixer({browsers: ['last 1 version']}),
  cssnext,
  precss
];

PostCSS配置与命令

淘宝镜像npmcnpm(写命令时,将npm换成cnpm,其他与npm语法相同)

$ npm install cnpm -g --registry=https://registry.npm.taobao.org

全局安装gulp
如果之前有安装过一个全局版本的 gulp,请执行一下npm rm --global gulp来避免和gulp-cli冲突

$ cnpm install --global gulp-cli

项目安装gulp(项目根目录下)

$ cnpm install --save-dev gulp

配置package.json文件

{ 
    "name": "PostCSS-Comn", 
    "version": "0.0.1", 
    "description": "PostCSS gulp plugin", 
    "keywords": [ 
        "gulpplugin", 
        "PostCSS", 
        "css" 
    ], 
    "author": "ningbo", 
    "license": "MIT", 
    "dependencies": { 
        "postcss": "^5.0.0", 
        "gulp": "~3.8.10" 
    }, 
    "devDependencies": { 
        "gulp-postcss": "^6.0.1" 
    } 
}

安装gulp-postcss(项目根目录下)

cnpm install --save-dev gulp-postcss

配置gulpfile.js文件,src文件为css编辑文件,css文件为编译生成文件

var gulp = require('gulp');
var postcss = require('gulp-postcss');

gulp.task('css', function () { 
    var processors = [
    ]; 
    return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./css')); 
});

测试(在src中创建测试文件style.css

.test{
    background: black;
}

测试运行命令,在css文件查看style.css

$ gulp css

添加PostCSS插件:Autoprefixer(处理浏览器私有前缀),cssnext(使用CSS未来的语法),precss(像Sass的函数)

$ cnpm install autoprefixer --save-dev
$ cnpm install cssnext --save-dev
$ cnpm install precss --save-dev

配置gulpfile.js文件

var autoprefixer = require('autoprefixer'); 
var cssnext = require('cssnext'); 
var precss = require('precss');

var processors = [
    autoprefixer,
    cssnext,
    precss
]; 

运行命令,在css文件查看style.css

$ gulp css

PostCSS不是未来的新语法

有一些优秀的PostCSS插件允许你写未来的语法,即使这些CSS语法尚未得到广泛支持。然而PostCSS并不是天生下来就支持未来语法。

有一些开发人员表示不愿意使用PostCSS就是这个原因之一,因为他们不知道如何让自己适应去写未来的CSS。然而,写未来的语法只不过是利用PostCSS之一。

如果你选择了,PostCSS完全改变你的开发过程。

分享你的项目

PostCSS最美之处就是可以将插件根据自己的需要做任意的组合。这对于确保其他的人希望在一个项目中有相同的PostCSS插件设置时,就提出了一个很大的挑战。这得感谢npm,我们可以通过他来管理插件依赖关系。

因为我们安装插件到项目中使用了--save-dev标志,在安装时会自动将依赖文件写入项目的package.json文件中。这意味着如果你想和他人分享你的项目,他们可能在命令终端运行npm install命令,就可以自动安装分享的插件。

有关于更多关于npm依赖关系管理的信息,你可以点击这里进行更多的了解。

PostCSS入门教程

source:http://www.w3cplus.com

  • PostCSS深入学习:你需要知道什么
  • PostCSS深入学习:设置选项
  • PostCSS深入学习:Gulp设置
  • PostCSS深入学习:Grunt配置
  • PostCSS深入学习: 管理插件
  • PostCSS深入学习: 跨浏览器兼容性
  • PostCSS深入学习: 压缩和优化CSS
  • PostCSS深入学习: PreCSS的使用
  • PostCSS深入学习: 定制自己的预处理器
  • PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
  • PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS
  • PostCSS深入学习: 简写和速写
  • PostCSS入门:Sass用户入门指南

PostCSS不是一个清理/优化工具

Autoprefixer插件成功的导致了大家对PostCSS的一个普遍看法:PostCSS是用来清理CSS、优化速度和处理跨浏览器兼容性。直到今天,我学习了PostCSS大量的插件,我有了自己的看法。

是的,有很多奇秒的插件提供了清理和优化代码画能,但这也仅是PostCSS一小部分。

来总结一下

接下来做个简单的总结:

  • 通过npm创建项目,并且将gulp安装到gulpfile文件
  • 安装gulp-postcss插件
  • 设置你的gulpfile.js文件,将gulpgulp-postcss加载到项目中
  • 创建一个任务,来编译你的CSS
  • 在任务中,设置一个processors数组
  • .pipe()是设置一个postcss()函数,并且将processors传递给它

你可以根据上面的教程介绍,遵循相同的步骤,你可以将PostCSS任何插件安装到项目中。

  • 通过npm install <plugin_name> –save-dev 命令将插件安装到你的项目中
  • 类似var autoprefixer = require("autoprefixer")代码在你的gulpfile.js文件中定义要加载的插件变量名
  • 将变量名添加到你的preprocessors数组中

如果你感兴趣,可以点击这里将示例所有代码下载下来。

工具

  • CodePen
  • Prepros

PostCSS不仅是一件事情

PostCSS最引人注目之处在于它不局限于任何一种类型功能,它是完全可以定制的,可配置的,可以说功能是无限的。

正如WordPress插件。电子商务插件是非常受欢迎的,但没有人认为WordPress本身作为一个电子商务引擎和WordPress的优点也不是仅给电子商务插件服务。

就PostCSS而言,我更喜欢把它当作是三明治。本身看上去不多,但这正是它存在的意义。这也说明了“空”的含义就是它为什么会有如此多的潜力。它的能力是一种无限的各种各样的馅料,足以让你感到惊叹。

尝试一个花生酱的三明治和自己不喜欢的。你肯定没有理由不选择好的而选择永远单一类型的三明治。相反,继续尝试一下往三明治中填充自己喜欢的酱料,你可能会发现一些新味道,让其成为你生活中的一部分。

下一节:Grunt PostCSS

在接下来的一节内容中,我们将一起讨论在项目中如何使用Grunt来配置PostCSS。

1 赞 1 收藏 评论

图片 13

插件

插件列表:Github | postcss.parts

常用插件:

  • cssnext:CSS未来语法
  • Autoprefixer:自动补全浏览器私有前缀
  • precss:CSS预处理(整合Sass、LESS或Stylus功能,语法基本和Sass的相同)
  • postcss-import:通过@import,整合多个CSS文件
  • css-mqpacker:将相同的CSS媒体查询规则合并为一个
  • cssnano:压缩CSS文件
  • postcss-color-rgba-fallback:给rgba颜色创建降级方案(添加备用颜色)
  • postcss-opacity:给opacity提供降级方案(给IE浏览器添加滤镜属性)
  • node-pixrem:让IE8支持rem单位
  • postcss-pseudoelements:将伪元素的::转换为:(IE8不支持::)

是什么让PostCSS变得特殊

PostCSS是一种完全不同的编写CSS的方法。前端将其描述为”PostCSS是一把瑞士军刀”,这是一个完全恰当的描述。

接下来,让我们看看PostCSS有哪些特别之处。

它的插件生态系统提供不同的功能

像PostCSS本身一样令人惊奇的是,它有很多不同的插件,这也是让PostCSS发光之处。当你看到PostCSS在GitHub上的可用插件列表,你会发现其具有各式各样的功能。

这些插件允许你使用新语法、颜色函数、conic-gradient、自定义属性、自定义选择器、媒体查询的别名以及更多。

还有备用插件来创建传统的语法,比如将十六制颜色换成rgba()颜色、给IE8的opacity添加滤镜,给IE8推出伪元素选择器,快速将px转换成rem等等。

还可以扩展插件,包括添加变量、mixin、条件、循环、BEM和SUIT类名等等。

选择颜色的管理插件,允许颜色从一种格式转换到另一种格式,修改颜色的alpha值,结合色彩,生成更友好的配色方案等等。

有网格系统,优化工具,缩写以及分析报告的插件等等。

当前插件不断的越来越多,这里我法一一罗列出来,如果感兴趣,可以仔细阅读这个插件列表。

模块化

另一方面,PostCSS具有很可用的插件,你可以根据自己所需尽可能使用多的选择或尽可能少选择。

如果仅想用PostCSS让CSS是更有效率和让浏览器更友好的话,加载一些优化插件,你就可以闪人了。

如果仅想用POstCSS作为预处理器的话,使用一些语言扩展插件就OK。

PostCSS的基本原理是粒子化,模块化。简而言之,没有处理多个功能的笨重插件。相反,每创建一个插件,就是一个功能。

例如,你可以根据自己自己喜欢的语法做选择和创建自己或自定义自己的预处理器。或者,你可以加载PerCSS包,可以自动访问几个语言的扩展插件。

无论你是想使用PostCSS什么功能,你都只需要根据你自己特定目定安装所需的插件。意思就是说,你不需要安装任何依赖的插件。

快3倍的速度

另外PostCSS测试速度很快,其有两个原因:其一你只需要加载需要的插件;其二它是运行在JavaScript上。

您可以使用benchmark运行这些基准。

下面是一个测试数据对测试做了详细解析,测试了嵌套规则、变量和计算:

PostCSS: 36 ms Rework: 77 ms (2.1 times slower) libsass: 136 ms (3.8 times slower) Less: 160 ms (4.4 times slower) Stylus: 167 ms (4.6 times slower) Stylecow: 208 ms (5.7 times slower) Ruby Sass: 1084 ms (30.1 times slower)

1
2
3
4
5
6
7
PostCSS:   36 ms
Rework:    77 ms   (2.1 times slower)
libsass:   136 ms  (3.8 times slower)
Less:      160 ms  (4.4 times slower)
Stylus:    167 ms  (4.6 times slower)
Stylecow:  208 ms  (5.7 times slower)
Ruby Sass: 1084 ms (30.1 times slower)

可以创建任何自己想要的插件

PostCSS是用JavaScript编写的插件,这样只要能编写JavaScript的就可以创建一个自己想要的插件,达到自己的目的。值得庆幸的是,就算你不是专业的JavaScript开发人员,但使用PostCSS开发插件也就只需要短短的几个小时,就可以开发出一个全功能的插件。

在项目中使用像Stylus、Sass和LESS这样的预处理器能很好的工作,但它们不能成为每个人的一切。必须决定哪些特性能更好的为他们的用户群体服务。比如说,如果你想要一个功能,你可以做这样的功能,但它有可能会被其他人在项目中使用,但也很有可能其他人在项目中不需要使用。如法自由的结合到项目需求中。

即使有一个功能需求被认为适合项目需求,但项目维护人员或许没有时间去开发它。如果你自己又不具备这方面的技术水平,那么你也只能想想而以,无法使用上。

但是使用PostCSS,你不需要问任何人。如果你想要一个新特性,你自己完全可以做到。从我自己的经验来说,只要你略懂点JavaScript技术或经验,你就可以使用PostCSS创建自己需要的功能插件,而且自己是完全可控的。

在本系列后面的教程中,将通过创建一个PostCSS插件为例,告诉你如何创建PostCSS插件步骤。即使你认为自己不是一位JavaScript专家,我觉得你也会发现自己完全可以创建一个PostCSS插件。

你可以像使用CSS一样使用PostCSS

大多数PostCSS插件不需要使用自定义的语法,其实它就是典型的预处理器。相反,它们可以应用常规的CSS语法。这也意味着,你可以使用PostCSS就像是使用CSS一样。比如说,你要完成一个前端框架,你完全可以使用别人项目中的文件,例如Normalize.css文件。

这也意味着,你不需要固定使用一个特殊的预处理器,比如说Stylus、Sass或LESS,因为你总是可以应用PostCSS编译后的CSS。例如,你使用Sass编写的Foundation,完全可以使用PostCSS的优化和未来语法的插件生成新的CSS文件。

PostCSS库不会绑定到一个处理器上

虽然过去他们可能一直使用Stylus、Sass或LESS来编写一个库,但我们也开始看到有人通过PostCSS来创建整个库。

例如,Cory Simmons当时使用Stylus和Sass编写了一个网格系统,他的用户群体只对应使用Stylus和Sass的用户。随后他使用PostCSS移植了这个网格系统,这也意味着现在每个人都可以使用了,包手Stylus、Sass用户,甚至是使用LESS或不使用任何预处理器的人。

PostCSS可以与流行工具无缝衔接

由于PostCSS是基于JavaScript编写,所以它不需要你安装Ruby等,而且你可以将其集成在多个开发者工具中。

  • PostCSS插件可以通过Grunt,Gulp,Webpack,Broccoli,Brunch和END等工具一起使用
  • CodePen允许你使用PostCSS
  • Prepros支持Autoprefixer和cssnext插件
  • postcss-use插件允许你使用简单的CSS规则加载其他插件
  • 你可以使用一个package.json文件,通过npm可以在命令终端输入npm install自动安装任何PostCSS插件。这样可以在项目中共用PostCSS插件,也不用担心插件的配置与变化

我们将通过本系列的“快速入门指南”这部分告诉大家如何设置和使用PostCSS,敬请期待。

到了总结的时候了

你需要知道的第一件事情就是PostCSS速度很快,这并没有充分理由,所以现在是时候该清晰的理解它,并帮助你如何在开发过程中使用PostCSS。

PostCSS不是什么

  • 尽管表面上它看起来是一个预处理器,其实它不是一个预处理器
  • 尽管表面上它看起来是一个后处理器,其实它也不是一个后处理器
  • 尽管它可以促进、支持未来的语法,其实它不是未来语法
  • 尽管它可以提供清理、优化代码这样的功能,其实它不是清理、优化代码的工具
  • 它不是任何一件事情,这也意味者它潜力无限,你可以根据自己的需要配置你需要的功能

PostCSS特别之处

  • 多样化的功能插件,创建了一个生态的插件系统
  • 根据你需要的特性进行模块化
  • 快速编译
  • 创建自己的插件,且具可访问性
  • 可以像普通的CSS一样使用它
  • 不依赖于任何预处理器就具备创建一个库的能力
  • 可以与许多流行工具构建无缝部署

“PostCSS深入学习”系列

本系列中,我们将通过下面的系列教程告诉你如何使用PostCSS:

  • PostCSS深入学习: 设置选项
  • PostCSS深入学习: Gulp配置
  • PostCSS深入学习: Grunt配置
  • PostCSS深入学习: 探索插件

也会看看几个不同使用PostCSS的方法:

  • 跨浏览器
  • 压缩和优化
  • PreCSS预处理器
  • 定义自己的预处理器
  • 结合Stylus、Sass或LESS
  • CSS的BEM或SUI方法
  • 快捷键与缩写
  • PostCSS的语法糖

最后我们将带你创建自己的一个PostCSS插件。

你可能会注意到,PostCSS使用教程很缺乏。主要的原因是缺乏介绍未来CSS的插件。而看到的cssnext看起来要经历一次大变革,极大可能地会改为所需步骤。因此,我们也会留意它,给大家带来一个全新的教程,让大家好过渡。

所以让我们开始吧!在接下来的教程中我们将会真的接进入到“快速入门指南”系列,并向您展示使用PostCSS的最快方式。我们一直期待吧…(^_^)

1 赞 1 收藏 评论

图片 14

本文由pc28.am发布于前端技术,转载请注明出处:PostCSS长远学习,你须求精通怎样

上一篇:作文提出和属性优化小结,响应式Web设计实战总 下一篇:没有了
猜你喜欢
热门排行
精彩图文