PostCSS は、CSS_html/css_WEB-ITnose を記述するためのよりエレガントで簡単な方法です。

Sass チームは、CSSer の作業効率を大幅に向上させるために Compass を作成しました。ブラウザのさまざまなプレフィックスを考慮する必要はなく、公式のドキュメントの記述方法に従って記述するだけで済み、ブラウザでコードを取得できます。

.row {  @include display-flex;}

次のコードが得られます:

.row {  display: -webkit-flex;   display: flex;}

しかし、長年ネイティブ CSS の記述方法を使用してきた CSSer としては、公式ドキュメントを確認してから @include メソッドで記述することに慣れていません。 。

それでは、高効率な方法をやめてもいいのでしょうか?
実際にはそうではなく、Autoprefixer が役に立ちます。
実際、Autoprefixer は PostCSS の最も有名なプラグインの 1 つにすぎません。
さあ、写真を見てみましょう:

このように、ネイティブ CSS 記述方法を使用すると、ブラウザーのプレフィックス、IE の互換性、および次世代 CSS 記述方法の問題を解決することもできます。素晴らしいですね?

ああ、実際には、ドキュメントを確認する必要も、@include する必要もありません。
これはGoogle、Alibaba、Shopify、そしてTwitterが立ち上げたpostcssです。

PostCSS の基本的な使用方法をいくつか見てみましょう:

準備

構築ツールは Gulp
PostCSS をベースにしています
PostCSS プラグイン CSSNext は現在のブラウザと互換性を持たせるために次世代の CSS 記述方法を使用しています
PostCSS プラグ-in Autoprefixer は CSS のブラウザー接頭辞を完成します
PostCSS プラグイン CSS Grace は CSS を古いバージョンの IE と互換性を持たせます

package.json

{  "name": "postcss usage",  "version": "1.0.0",  "description": "postcss cssnext",  "main": "gulpfile.js",  "dependencies": {    "autoprefixer": "^5.2.0",    "autoprefixer-core": "^5.2.1",    "cssgrace": "^2.0.2",    "gulp": "^3.9.0",    "gulp-less": "^3.0.3"  },  "devDependencies": {    "autoprefixer": "^5.2.0",    "autoprefixer-core": "^5.2.1",    "cssgrace": "^2.0.2",    "cssnext": "^1.8.4",    "gulp-postcss": "^6.0.0",    "postcss": "^4.1.16"  },  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [    "postcss",    "gulp"  ],  "author": "givebest",  "license": "ISC"}

gulpfile.js

var gulp = require('gulp');var postcss = require('gulp-postcss');var autoprefixer = require('autoprefixer');var cssgrace  = require('cssgrace');var cssnext  = require('cssnext');gulp.task('css', function () {    var processors = [        autoprefixer({browsers: ['last 3 version'],        	cascade: false,        	remove: false    	}),        cssnext(),        cssgrace    ];    return gulp.src('./src/css/*.css')        .pipe(postcss(processors))        .pipe(gulp.dest('./dist'));});gulp.task('watch', function(){	gulp.watch('./src/css/*.css', ['css']);});gulp.task('default', ['watch', 'css']);

インストール

npm install

Use

gulp

プロジェクトの詳細なアドレスは次のとおりです: https://coding.net/u/ givebest/p/postcss-usage/git