PostCSS で CSS の未来に飛び込む - JS - Republic's Blog

PostCSS とは何かを説明する前に、まず PostCSS が何ではないのかを理解しましょう。

基本的に、PostCSS について初めて聞くと、SASS、LESS、Stylus に似た新しい CSS プリプロセッサとして考える傾向があります。

プリプロセッサとして使用したい場合は、プリプロセッサと同様に動作します。同時に、ポストプロセッサー、最適化ツール、将来の構文と互換性のあるプラグインも備えています...必要な機能がすべて揃っています。

PostCSS の主な目的は、ニーズを満たすためにさまざまなツールを使用できるようにすることです。

したがって、PostCSS はビルド ツールとして考える必要があります。これにより、さまざまな JavaScript プラグインを使用して CSS を保守できるようになります。 これらのプラグインは、こちらの postcss.parts にあります

非常に多くのプラグインがあるため、この記事では最も一般的に使用され、強力なプラグインを確認します。

同時に、Gulp を使用して CSS ファイルを処理する単一タスクを作成する方法も学びます。

オートプレフィクサー

以前にプリプロセッサを使用したことがある場合は、プレフィックスを記述する必要がないことがどれほど快適かを経験するでしょう。

たとえば、このように書く必要はありません

:-webkit-full-screen a {
 display: -webkit-box;
 display: flex
}
:-moz-full-screen a {
 display: flex
}
:-ms-fullscreen a {
 display: -ms-flexbox;
 display: flex
}
:fullscreen a {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex
}

ただ

れぇ

自分で試してみたい場合は、このインタラクティブなデモ http://autoprefixer.github.io

を使用できます。 ドキュメントはここをクリックしてください: github.com/postcss/autoprefixer

プリCSS

PostCSS は SASS のようなプリプロセッサではありませんが、一部のプラグインを通じて Sass のような形式のファイルを処理できます。

推奨されるプラグインは PreCSS です。これは、多数の PostCSS プラグインを統合し、Sass 構文スタイルを作成できるようにします。

詳細についてはドキュメントを読んで、インタラクティブなデモを試して可能性をテストしてください。

Css次

次世代の CSS である CSS4 は、CSS の記述方法とセレクターの使用方法を変えることを約束しています。

残念ながら、このバージョンの仕様はまだ開発中であり、リリース日はまだ発表されていません。

幸いなことに、次世代 CSS の機能の一部を利用したい場合は、CssNext というプラグインが役に立ちます。

CSSNext の公式 Web サイトには、サポートされているすべての機能がリストされています: cssnext.io/features/

ここでもプレイできます: cssnext.io/playground/

CssNano

最後になりましたが、最適化についてです。 CssNano は、さまざまなモジュールを使用して CSS コードを圧縮および最適化できます。

通常の z-index が台無しになる可能性があるため、z-index を無効にすることをお勧めします。

この最適化リストを確認できます: cssnano.co/optimisations/ また、Gitter で CssNano の作成者とチャットすることもできます: gitter.im/ben-eb/cssnano

それでは、Gulp でこれらのプラグインを使用する方法を見てみましょう。

Gulp × PostCSS

ガルプ

まず、Gulp、Gulp Load Plugins、および Gulp PostCSS を開発依存関係としてインストールします。コンソールで次のコマンドを実行します:

:fullscreen a {
 display: flex
}

Gulp を使用する必要がある gulpfile.js を作成し、次のコードを追加します。

りー

Gulp Load PLgins のコードを追加します:

npm i -D gulp gulp-load-plugins gulp-postcss

Gulp Load Plugins 依存関係は、$ を通じて必要なプラグインを呼び出します。

ポストCSS

次に、開発依存関係と同じ方法で、必要な PostCSS プラグインをインストールする必要があります

var gulp = require('gulp'),

インストール後、gulpfile.js

$ = require('gulp-load-plugins')();

に追加します 次に、Gulp CSS タスクの作成を開始します

npm i -D autoprefixer cssnano cssnext precss

このタスクでは、まず変数を使用して、使用する PostCSS プラグインを保存します

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

CssNano の zindex:false を設定して、z インデックスがリセットされないようにします。

CSS ファイルを処理するには、次のファイルを取得する必要があります:

// Gulp task to process CSS with PostCSS plugins 
gulp.task('css', function() {

 });

次に、プロセッサー変数の PostCSS プラグインを介して CSS ファイルを処理します。

パイプメソッドを使用して処理プロセスを接続します

var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

次のコードを使用して、処理されたファイルを出力します

return gulp.src('./source/css/style.css')

上記はすべて、PostCSS プラグインを使用して CSS を処理するときに行う必要があることです。

りー

Tuts+ については完全かつ詳細なガイドがありますので、ぜひ一読をお勧めします: webdesign.tutsplus.com/series/postcss-deep-pe–cms-889

また、これらの PostCSS プラグインを使用して、すぐに開始できる定型テンプレートを作成しました: /github.com/PierrickGT/PCGB

blog.js-republic.com/jump-into-the-future-of-css-with-postcss/

以上がPostCSS で CSS の未来に飛び込む - JS - Republic's Blogの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。