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

轉載于:https://www.cnblogs.com/cart55free99/p/5152835.html

總結

以上是生活随笔為你收集整理的PostCss 从0开始的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。