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