現代のWeb開発はまだ止まっておらず、プロジェクトの複雑さは日々増大しています。 開発者が作業を円滑化および自動化して、最新の要件を満たし、最新の要件である開発リズムに対応できるようにする新しいツールが常に登場しています。 まず、少ない、sassなどのプリプロセッサが私たちの助けになりました。 その後、gulp、grunt、webpackなどのビルドシステムが登場しました。 フレームワークが登場しましたが、最も有名なのはおそらくコンパスです。
すべてが順調でしたが、大きなプロジェクトが長い間コンパイルされ始め、開発者に貴重な時間を費やし始めたことはつまずきました。 新しい開発者がプリプロセッサの新しい構文を習得することは困難であり、企業の新しい人材のトレーニングが複雑になりました。 プリプロセッサで既存の大規模なプロジェクトを書き換えることは問題でした。 プリプロセッサはCSSコードを汚染し、関数とmixinでオーバーロードし、特にチームの経験の浅い開発者にとって読みやすさを低下させました。 その後、革新的なPostCSSプロジェクトが助けになり、既存のCSSファイルを解析し、それらに基づいてAST（ Abstract Syntax Tree ） ツリーを構築し、JSプラグインを使用してこのツリーを変換します。 これは、着信ファイルを高速で処理する革新的なアプローチです。 そして、毎日、世界中でPostCSSの人気が高まっています。 PostCSSは、多くの業界リーダー、特にgoogle、github、ebay、wikipedia、taobaoで使用されています。
多くの開発者は、precss、cssnext、autoprefixerなどの有名なプラグインを使用しています。
precss-プリプロセッサーとのギャップを狭め、PostCSSを使用してそれらの機能を実装できます。
cssnext-将来のCSS機能を使用できるようになります。
autoprefixer -CSSプロパティのベンダープレフィックスを追加します。プレフィックス（-o、-moz、-ms）について考える必要はありません。autoprefixer自体が必要なプレフィックスを追加するため、ブラウザは必要な機能をよりよくサポートします。
いいえ、ごく最近、PostCSSエコシステムに新しいプラグインHamsterが登場しました。これにより、プロジェクトの開発とサポート時間を短縮できます。 これは、PostCSSのsassコンパスの代替となることを目的としたフレームワークです。 また、コンパスに代わるものがないため、開発者はまだPostCSSに移行できません。 このフレームワークは、競合他社と比較して、優れた柔軟性、高速性、シンプルな構文を備えています。
PostCSS Hamsterをインストールするには、既存のnpmプロジェクトでコマンドを実行する必要があります。
npm install postcss-hamster --save-dev
次に、ファイルを処理するJSファイルを作成する必要があります。 このコードでは、filename.cssを入力ファイルの名前に、outputfilename.cssを結果が書き込まれるファイルの名前に置き換える必要があります。
var fs = require("fs"), postcss = require("postcss"), hamster = require("postcss-hamster"); fs.readFile("filename.css", "utf8", (err, css) => { postcss([hamster]).process(css).then(result => { fs.writeFileSync("outputfilename.css", result.css); }); });
JSファイルを実行して、結果のCSSファイルを取得します。
node .js
詳細なインストールと構成については、ドキュメントに記載されています。
残念ながら、フレームワークの機能に慣れて、それを完全に使い始めるには、ドキュメントを読む必要があります。 幸いなことに、ロシア語のすべてのドキュメントが適切にドキュメント化されており、ドキュメントの作成に使用した実際の例が提示されています。 一見したところ、多くの人にとってドキュメントが過負荷で複雑に見えるかもしれませんが、そうではありません。 ドキュメントは特に論理的な部分に分かれており、準備ができていないユーザーでも簡単に自分とpostcssで作業を開始できます。 そして、経験豊富なユーザーは、必要なものだけを選択できます。
現時点では、いくつかのプロジェクトでフレームワークがテストされていますが、バグを排除するにはユーザーによるテストが必要です。 また、次のバージョンで表示したい要望と機能のリストも受け入れられます。 現在、プロジェクトはRC段階にあり、リリースの準備中です。バージョン2.0では、新しく便利で興味深い機能を備えたさらなる作業が行われます。 Gitterであなたの願いを表現できます。 また、プルリクエストをお待ちしております。
敬具、PostCSS Hamster開発者、グレゴリー！
ソースコード： Github
ドキュメント： RU
サポート/トーク： Gitter