PostCSS使用教程

PostCSS是一個用javascript轉換CSS的工具，有了它可放心使用CSS未來的語法等。
特點：

• 增加代碼的可讀性：可自動添加屬性前綴
• 可使用最新的CSS語法，如變量定義
• 可模塊化CSS，CSS Modules
• 可檢查CSS語法錯誤，避免出錯
• 強大的格子系統LostGrid

首先介紹下原生CSS變量基礎知識：
一、CSS變量
1. 變量聲明：
變量名前加兩根連詞線（–），如text-size: 14px;
注：變量名的大小寫是敏感的。
2. var()函數：
用於讀取變量值，如font-size: var(text-size); var()函數還可以接受第二個參數，表示變量的默認值，如font-size: var(text-size, 16px);
注：變量值只能用作屬性值，不能用作屬性名。
3. 變量值類型：

• 若變量值為一個字符串，則可以與其他字符串拼接。

bar: 'hello';
foo: var(bar)' world';

• 若變量值為數值，不能與數值單位直接連用，需用calc()函數連接。

.foo {
 gap: 20;
 /* 無效 */
 margin-top: var(gap)px;
 margin-top: calc(var(gap) * 1px);
}

• 若變量值帶有單位，則不能寫成字符串。

/* 無效 */
.foo {
 foo: '20px';
 font-size: var(foo);
}
/* 有效 */
.foo {
 foo: 20px;
 font-size: var(foo);
}

4. 作用域：
CSS變量的作用域是它所在選擇器的有效範圍，讀取時優先級最高的聲明生效。

<style>
 //全局變量
 :root { color: blue; }
 div { color: green; }
 #alert { color: red; }
 * { color: var(color); }
</style>
<p>藍色</p>
<div>綠色</div>
<div id="alert">紅色</div>

5. 響應式布局：
在響應式布局的media中聲明變量，可使得不同的屏幕寬度有不同的變量值。

body {
 primary: #7F583F;
 secondary: #F7EFD2;
}
a {
 color: var(primary);
 text-decoration-color: var(secondary);
}
@media screen and (min-width: 768px) {
 body {
 primary: #F7EFD2;
 secondary: #7F583F;
 }
}

6. javascript操作

// 設置變量
document.body.style.setProperty('primary', '#7F583F');
// 讀取變量
document.body.style.getPropertyValue('primary').trim();
// '#7F583F'
// 刪除變量
document.body.style.removeProperty('primary');

二、安裝配置
1. gulp配置
(1) 全局安裝PostCSS: npm install postcss -g (2) 項目安裝gulp-postcss: npm install save-dev gulp-postcss (3) gulpfile.js文件設置：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task('css', function () {
 var processors = [ ]; //放置PostCSS插件
 return gulp.src('./src/*.css')
 .pipe(postcss(processors))
 .pipe(gulp.dest('./dest'));
});

(4) 添加PostCSS插件：Autoprefixer(處理瀏覽器私有前綴),cssnext(使用CSS未來語法),precss(CSS預處理函數) npm install save-dev autoprefixer cssnext precss gulpfile.js文件修改：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
gulp.task('css', function () {
 //放置PostCSS插件
 var processors = [
 autoprefixer, cssnext, precss
 ];
 return gulp.src('./src/*.css')




 .pipe(postcss(processors))
 .pipe(gulp.dest('./dest'));
});

2. webpack配置
(1) 安裝相應包 npm install save-dev postcss postcss-loader postcss-cssnext postcss-import (2) 配置webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
 context: path.resolve(__dirname, 'src'),
 entry: {
 app: './app.js';
 },
 module: {
 loaders: [
 {
 test: /.css$/,
 use: ExtractTextPlugin.extract({
 use: [
 {
 loader: 'css-loader',
 options: { importLoaders: 1 },
 },
 'postcss-loader',
 ],
 }),
 },
 ],
 },
 output: {
 path: path.resolve(__dirname, 'dist/assets'),
 },
 plugins: [
 new ExtractTextPlugin('[name].bundle.css'),
 ],
};

(3) 根目錄配置postcss.config.js

module.exports = {
 plugins: {
 'postcss-import': {},
 'postcss-cssnext': {
 browsers: ['last 2 versions', '> 5%'],
 },
 },
};