PostCSSより優雅で簡単なCSS方式
3473 ワード
SassチームはCompassを作成し、CSSerの生産性を大幅に向上させました.ブラウザのプレフィックスを考慮する必要はありません.公式ドキュメントの書き方で書くだけで、ブラウザのプレフィックスを加えたコードが得られます.以下のようにします.
次のコードが得られます.
しかし、長期にわたって原生CSSで書かれているCSSerとしては、公式に文書を調べ、
では問題が来て、私は効率的な方法を放棄するしかありませんか?実はそうではありません.Autoprefixerはあなたを助けることができます.実際、AutoprefixerもPostCSSの最も有名なプラグインにすぎません.さあ、図を見てみましょう.
構築ツールはGulpのためにPostCSS PostCSSプラグインCSSNextに基づいて次世代CSSで書く方式で互換性があります現在ブラウザPostCSSプラグインAutoprefixerはCSSのためにブラウザのプレフィックスを補充しますPostCSSプラグインCSS GraceはCSSを旧版IEに互換性があります
詳細アイテムのアドレスは次のとおりです.https://coding.net/u/givebest/p/postcss-usage/git
.row {
@include display-flex;
}
次のコードが得られます.
.row {
display: -webkit-flex;
display: flex;
}
しかし、長期にわたって原生CSSで書かれているCSSerとしては、公式に文書を調べ、
@include
で書くことに慣れていない.では問題が来て、私は効率的な方法を放棄するしかありませんか?実はそうではありません.Autoprefixerはあなたを助けることができます.実際、AutoprefixerもPostCSSの最も有名なプラグインにすぎません.さあ、図を見てみましょう.
このように、1種の原生CSSの書く方式で、それからあなたにブラウザのプレフィックス、IEの互換性を解決することができて、次の世代CSSの書く方式は現在のブラウザに互換性があって、とてもクールではありませんか? ああ、実はもっと簡単で、もっと優雅で、ドキュメントを調べる必要はありません。@includeは使いません。これがTwitterで発売されたPostCSSで、Google、アリ、Shopify、TwitterはもちろんPostCSSを使っているそうです。 上の図に役立つPostCSSプラグインは次のとおりです。 CSSNextでは、次世代CSSが変数をサポートし始めたことがわかります。これは「Sass」、「Less」が重要ではないことを意味していますか?より多くの方法でアクセスできます。http://cssnext.io/features/Autoprefixer、知名度の高いPostCSSプラグイン、Gulp、Webpack、Grunt、Compassなどをサポートし、より多くのアクセス可能性を知っています。https://github.com/postcss/autoprefixerCSS Grace、国内の大神が書いたのは大部分のよく使うIE Hackのプラグインを実現して、中国語のドキュメント:https://github.com/cssdream/cssgrace/blob/master/README-zh.md もちろん、より多くのPostCSSプラグインがアクセスできます。http://postcss.parts では、PostCSSの基本的な使い方を見てみましょう。
の準備を
構築ツールはGulpのためにPostCSS PostCSSプラグインCSSNextに基づいて次世代CSSで書く方式で互換性があります現在ブラウザPostCSSプラグイン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
使用
gulp
詳細アイテムのアドレスは次のとおりです.https://coding.net/u/givebest/p/postcss-usage/git