PostCSS_html/css_WEB-ITnose について少し

• 元のリンク: PostCSS – What It Is And What It Can Do
• 原著者: Jake Bresnehan
• 翻訳元: Nuggets Translation Project
• 翻訳者: Zheaoli
• 校正者: aidistan、JolsonZhu

PostCSS は 2013 年 9 月に誕生しました。現在まで開発され、多くの開発者が職場で使用しています。 。 PostCSS にまだ出会ったことがない場合は、この記事がおすすめです。

PostCSS は、JavaScript プラグインを使用して CSS を変換するツールです。

PostCSS 自体は非常に小さく、CSS パーサー、CSS ノード ツリーを操作する API、およびリソース ジェネレーターのみが含まれています (翻訳者のメモ) 1: 元のテキストはソース マップ)、およびノー​​ド ツリー文字列化ツール。すべての黒魔術はプラグインを利用することで実現されます。

現在、PostCSS のエコシステムには 100 を超えるプラグインがあります。これらのプラグインは、lint (翻訳者注 2: CSS コードの検出に使用されるツール)、ベンダー プレフィックス (翻訳者注 3: ブラウザの追加) など、非常に多くのことを行うことができます。カーネル プレフィックスを使用すると、ブラウザーのいくつかの固有の機能を使用できるようになります)、最新の CSS 機能を使用できるようになります、CSS で統計情報を提供できるようになります、または Sass 、 Less または Stylus およびその他の CSS プリプロセッサ。

次の 10 個のプラグインを見てみましょう

Autoprefixer

CSS を解析し、必要に応じて ベンダーを追加しますユーザーの使用シナリオのプレフィックス (上記の注 2)。

PostCSS Focus

キーボード操作を使用して

:focus セレクターを各 :focus セレクター>:hover >PostCSSプラグイン。

PreCSS

コード内で

Sass などのタグを使用できるようにするプラグイン。

Stylelint

CSS スタイルの一貫性を維持し、悪い CSS リンターツール。

PostCSS CSS 変数

ユーザー定義の

CSS

変数CSS 変数) を静的スタイルに変換するプラグイン。

PostCSS Flexbugs Fixes

flexbug

のバグを修正するためのプラグイン。

PostCSS CSSnext

CSS

の最新機能を使用できるプラグインです。最新の CSS 機能を現在のブラウザーと互換性のある機能に変換するため、ブラウザーが特定の新機能をサポートするまで待つ必要がなくなりました。

PostCSS CSS Stats

cssstats をサポートするプラグイン。このプラグインは

cssstatus

オブジェクトを返すので、それを CSS 分析に使用できます。

PostCSS SVGO

PostCSS

のインライン SVG 用に最適化されています。

PostCSS Style Guide

スタイルガイドを自動生成できるプラグインです。

CSS

コメントは Markdown で生成され、生成された HTML ドキュメントに表示されます。

独自のプラグインを作成してコミュニティに貢献したい場合は、まずガイドラインと公式の PostCSS プラグイン ボイラープレート ドキュメントを必ずお読みください。

あなたの仕事で

PostCSS

を使用する

PostCSS

は JavaScript で書かれているため、非常に便利に使用できます。 、Gulp、Webpack などの一般的なフロントエンド ビルド ツールを使用します。 これは、Autoprefixer プラグインの使用方法の例です。

npm install autoprefixer --save-dev

Gulp

Gulp を使用する場合は、gulp-postcss をインストールする必要があります。 npm install --save-dev gulp-postcss

gulp.task('autoprefixer', function () {    var postcss      = require('gulp-postcss');    var autoprefixer = require('autoprefixer');    return gulp.src('./src/*.css')    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))    .pipe(gulp.dest('./dest'));});

Grunt

Grunt を使用する場合は、grunt をインストールする必要があります。 postcss 。 npm install grunt-postcss --save-dev

module.exports = function(grunt) {    grunt.loadNpmTasks('grunt-postcss');    grunt.initConfig({        postcss: {            options: {                    map: true,                processors: [                    require('autoprefixer')({                        browsers: ['last 2 versions']                    })                ]            },            dist: {                src: 'css/*.css'            }        }    });    grunt.registerTask('default', ['postcss:dist']);};

Webpack

Webpack を使用する場合は、postcss-loader をインストールする必要があります。 npm install postcss-loader --save-dev

var autoprefixer = require('autoprefixer');module.exports = {    module: {        loaders: [            {                test:   /\.css$/,                loader: "style-loader!css-loader!postcss-loader"            }        ]    },    postcss: function () {        return [autoprefixer];    }}

PostCSS

を統合する方法については、こちらの PostCSS リポジトリからヘルプを得ることができます。 最後の誠実なアムウェイ~

場合によっては、新しいテクノロジー、新しいツール、新しいフレームワークがリリースされたとき、それらの開発傾向を観察して使用することが賢明な行動であることは間違いありません。 現在、

PostCSS

はかなり成熟した段階まで開発されているので、仕事で使用することを強くお勧めします。 なぜなら、それは現在エンジニアリングで広く使用されており、将来的にもあまり変わらないからです。