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那样使用变量

/*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

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

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');