PostCss 从0开始

PostCss

摘自
http://ju.outofmemory.cn/entry/215105
http://www.w3cplus.com/PostCSS/postcss-deep-dive-preprocessing-with-precss.html

PostCss是啥

官方定义
“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是一个可以运行在Gulp Grunt Webpack中的插件
同时它又是一套CSS处理插件的一个环境

PostCss怎么用

基本和Sass一样 要和Sass那样使用变量
css
/PostCSS是一个Gulp插件 同时是一套Css插件的运行环境/

/PostCSS和Sass语法最为相似 PostCSS将Sass那样的表达形式直接写在css文件中/

.menu1 {
width: 100%;
a {
text-decoration: none;
}
&::before {
content: '';
}
}

/使用PreCSS插件(PostCSS中的插件)来做变量 条件处理/

/*PreCSS is a tool that allows you to use Sass-like markup in your CSS files.
Enjoy a familiar syntax with variables, mixins, conditionals, and other goodies.
*/

/LESS中使用@符声明变量，比如@color: #ccc;
Stylus中使用$符声明变量，比如$color=#ccc;
Sass中使用$符声明变量，比如$color: #ccc;/

$text_color: #232323;
$blue: #056ef0;
$column: 200px;
body {
color: $text_color;
}

.menu {
width: calc(4 * $column);
}

.menu_link {
background: $blue;
width: $column;
}

/条件/
/和Sass一样 判断表达式两边要有空格 否则不识别表达式/
$column_layout: 2;
.column {
@if $column_layout == 2 {
width: 50%;
float: left;
}
@else {
width: 100%;
}
}

/循环/
.for-test {
@for $i from 1 to 3 {
p:nth-of-type($i) {
margin-left: calc( 100% / $i);
}
}
}
/*each循环在循环体中不是 $icon 而是 $(icon) */
.each-test {
@each $icon in (foo, bar, baz) {
.icon-$(icon) {
background: url('icons/$(icon).png');
}
}
}

/包含mixin/
/@define-mixin 规则名 变量名/
@define-mixin icon $name {
padding-left: 16px;
&::after {
content: "";
background-url: url(/icons/$(name).png);
}
}

.search {
@mixin icon search;
}
.search2{
@mixin icon search2;
}

/扩展/
@define-extend bg-green {
background: green;
}

.notice--clear {
@extend bg-green;
}

.xx-clear{
@extend bg-green;
}
/扩展会减少冗余 得到的结果如下/
/.notice--clear, .xx-clear {
background: green;
}/

/值的复制/
/最后得到 margin: 20px;padding: 20px;/
.heading {
margin: 20px;
padding: @margin;
}

###结合Gulp
```javascript```

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function() {

  return gulp.src('src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([require('autoprefixer'), require('precss')]))
    //.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/'));
});

gulp.task('watch',function() {
  gulp.watch('src/*.css', ['css']);
});

gulp.task('default', ['css','watch']);

结合Webpack

注意，webpack对css的各个资源引用都有检查，比如背景图片不存在的话，会有Error

javascript

var webpack = require('webpack');
var path = require('path');

module.exports = {
entry: path.join(__dirname, 'main.js'),
output: {
path: path.join(__dirname, 'out'),
publicPath: "./out/",
filename: 'bundle.js'
},
module: {
loaders: [{
test: /.css$/,
loader: "style-loader!css-loader!postcss-loader"
}]
},
postcss: function() {
return [require('autoprefixer'), require('precss')];
}
}

PS
main.js和style.css在同一个文件夹中
在main.js中需要引入这个css文件才行```var css = require('./style.css');```