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是一個(gè)可以運(yùn)行在Gulp Grunt Webpack中的插件
同時(shí)它又是一套CSS處理插件的一個(gè)環(huán)境

PostCss怎么用

基本和Sass一樣 要和Sass那樣使用變量

/*PostCSS是一個(gè)Gulp插件 同時(shí)是一套Css插件的運(yùn)行環(huán)境*//*PostCSS和Sass語(yǔ)法最為相似 PostCSS將Sass那樣的表達(dá)形式直接寫在css文件中*/.menu1 {width: 100%;a {text-decoration: none;}&::before {content: '';} }/*使用PreCSS插件(PostCSS中的插件)來(lái)做變量 條件處理*//*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一樣 判斷表達(dá)式兩邊要有空格 否則不識(shí)別表達(dá)式*/ $column_layout: 2; .column {@if $column_layout == 2 {width: 50%;float: left;}@else {width: 100%;} }/*循環(huán)*/ .for-test {@for $i from 1 to 3 {p:nth-of-type($i) {margin-left: calc( 100% / $i);}} } /*each循環(huán)在循環(huán)體中不是 $icon 而是 $(icon) */ .each-test {@each $icon in (foo, bar, baz) {.icon-$(icon) {background: url('icons/$(icon).png');}} }/*包含mixin*/ /*@define-mixin 規(guī)則名 變量名*/ @define-mixin icon $name {padding-left: 16px;&::after {content: "";background-url: url(/icons/$(name).png);} }.search {@mixin icon search; } .search2{@mixin icon search2; }/*擴(kuò)展*/ @define-extend bg-green {background: green; }.notice--clear {@extend bg-green; }.xx-clear{@extend bg-green; } /*擴(kuò)展會(huì)減少冗余 得到的結(jié)果如下*/ /*.notice--clear, .xx-clear {background: green; }*//*值的復(fù)制*/ /*最后得到 margin: 20px;padding: 20px;*/ .heading {margin: 20px;padding: @margin; }

結(jié)合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']);

結(jié)合Webpack

注意，webpack對(duì)css的各個(gè)資源引用都有檢查，比如背景圖片不存在的話，會(huì)有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在同一個(gè)文件夾中
在main.js中需要引入這個(gè)css文件才行var css = require('./style.css');

轉(zhuǎn)載于:https://www.cnblogs.com/cart55free99/p/5152835.html

總結(jié)

以上是生活随笔為你收集整理的PostCss 从0开始的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。