POSTCSS_html/css_WEB-ITnose を使用したクイック スタート

| 元のリンク: http://aotu.io/notes/2015/10/13/start-postcss/

PostCSS の初めての紹介

PostCSS について初めて聞いたので、公式 Github の次の紹介文を読んでください:

PostCSS は、JS プラグインで CSS を変換するツールです。これらのプラグインは、変数とミックスインをサポートできます。将来の CSS 構文、インライン イメージなどをトランスパイルします

を中国語に翻訳すると、次のようになります:

PostCSS は、CSS を変更するために JS プラグインを使用して実装されたツールのセットですこれらのプラグインは、変数と混合構文をサポートし、将来の CSS 構文、インライン画像などを変換できます。

Less や SASS などのツールを使用して、合意された構文に従って CSS を前処理しています。書き込み、最終的にそれを使用可能なスタイルに変換するには、その代償として、 まずこのツールの書き込み構文に精通する必要があります 。

近年、Grunt、Gulp、Webpack などの自動化ツールの台頭により、組み合わせたアプリケーションが非常に普及しています。では、PostCSS の重要性は何でしょうか。答えは次のとおりです: CSS エコシステム

PostCSS には、CSS にブラウザーのプレフィックスを自動的に追加するプラグイン autoprefixer、最もよく使用される px2rem など、多くのプラグインがあります。まだ CSS 標準ではないものの、特に利用できる cssnext をサポートするプラグインがあり、さらにたくさんのプラグインがあります。有名な Bootstrap でさえ、次のバージョンの Bootstrap 5 ではスタイルの基礎として PostCSS を使用する予定です。

PostCSS を一文で要約すると: CSS コンパイラーでできること、またできること、より良くできること

PostCSS をすぐに使う

上記はおおよそ次のとおりですPostCSS が導入されましたが、私たちの頭の中で PostCSS についての理解が形成されていない可能性があります。そこで、簡単な例を通して PostCSS の使用方法を見てみましょう。

プラグインのおかげで、PostCSS は Grunt、Gulp、webpack、Broccoli、Brunch、ENB をサポートします。ここでは例として Gulp を使用します。

環境の準備

インスタンス ディレクトリを作成して入力します

mkdir postcss-demo && cd postcss-demo

すぐに package.json ファイルを生成します

# --yes 参数能够帮助我们快速生成默认的package.jsonnpm init --yes

上記で作成したものを作成しますpackage.json ファイルのメイン パラメータを gulpfile.js に変更し、必要な依存関係をインストールします

# gulp跟gulp-postcss是必须的，后面两个插件为了演示用途npm i gulp gulp-postcss autoprefixer autoprefixer-core cssnext --save-dev -d

gulpfile.js を作成します

# 这里用命令行进行创建，你也可以手动新建touch gulpfile.js

gulpfile.js を変更します

次のコードを gulpfile.js に貼り付けます

var gulp = require('gulp');var postcss = require('gulp-postcss');var autoprefixer = require('autoprefixer');var cssnext = require('cssnext');//定义css任务gulp.task('css', function(){  //定义postcss任务流数组  var processors = [    autoprefixer({      browsers:['last 3 version'],      cascade: false,      remove: false    }),    cssnext()  ];  return gulp.src('./src/css/*.css')             .pipe(postcss(processors))             .pipe(gulp.dest('./dist'));});

サンプル スタイルを作成します

プロジェクトのルート ディレクトリに src ディレクトリを作成し、その下に css ディレクトリを作成します。そしてスタイルを作成します。

# 这里用命令创建，你也可以手动创建mkdir -p src/css && touch style.css

編集スタイルは次のとおりです:

h1{  display:flex;}:root {--fontSize: 1rem;--mainColor: #12345678;--highlightColor: hwb(190, 35%, 20%);}body {color: var(--mainColor);font-size: var(--fontSize);line-height: calc(var(--fontSize) * 1.5);padding: calc((var(--fontSize) / 2) + 1px);}

インスタンスを実行します

すべての準備ができたら、実行できます。プロジェクトのルート ディレクトリに定義したばかりのタスク

gulp css

予期せぬことが起こらなければ、ルート ディレクトリの下に dist フォルダが生成され、その中にスタイル ファイルが含まれます。その内容は次のとおりです。

body{  display:-webkit-flex;  display:-ms-flexbox;  display:-webkit-box;  display:flex;}body {color:#123456;color:rgba(18, 52, 86, 0.47059);font-size:16px;font-size:1rem;line-height:24px;line-height:1.5rem;padding:calc(0.5rem + 1px);}

私たちが書いた内容がわかります。スタイルにはブラウザーの接頭辞が自動的に付けられ、将来の CSS 構文の一部が変換されます。

PostCSS を理解する

上記の例を通じて、PostCSS の使用方法を理解する必要があります。この時点で、まず CSS プリプロセッサの使用履歴を思い出してください:

1. 変数定義、ネスト、継承などの CSS プリプロセッサの構文機能を学習します
2. 上記の構文に従って、特定のサフィックス名 (.less/.scss など) を持つファイルを作成します
3. Gulp/Grunt/Webpack などの自動ツールを通じて、または手動で CSS スタイルにコンパイルします

PostCSS の使用履歴:

1. CSS に従って CSS スタイル ファイルを直接書き込みます標準構文
2. PostCSS プラグインをロードし、Gulp/Grunt/Webpack などの自動化ツールを介して出力を変換します

比較して、CSS プリプロセッサは次のようなアナロジーを示します。あなたはツールボックスです、ツールボックスの中に何かを手に入れる方法はあなたと合意されており、あなたはこれらのルールに従ってそれを受け取る必要があります、そしてPostCSSはあなたに必要なツールを横から選んで置くことができるようなものです。十分でない場合は、独自のツールを構築できます。

PostCSS の詳細を確認します。

PostCSS 自体には CSS アナライザー、CSS ノードのみが含まれています。ツリー API、ソース マップ ジェネレーター、CSS ノード スプライサー、および PostCSS ベースのプラグインはすべて使用します。これは、CSS ノード ツリー API を使用して実装されます。

CSS は次のように構成されていることは誰もが知っています:

element {  prop1 : rule1 rule2 ...;  prop2 : rule1 rule2 ...;  prop2 : rule1 rule2 ...;  ...}

各スタイル ルールには 1 つ以上の属性と値が含まれています。したがって、PostCSS の実行プロセスは大まかに次のとおりです:

1. パーサー

   CSS アナライザーを使用して CSS 文字コンテンツを読み取り、完全なノード ツリーを取得します

2. プラグイン

   CSS ノード ツリー API を使用して、上記で取得したノード ツリーに対して一連の変換操作を実行します

3. プラグイン

   上記の CSS 文字への変換後、CSS ノード スプライサーを使用してノード ツリーを再構築します

4. Stringifier

   上記の変換中に、ソース マップ ジェネレーターを使用して、変換前後の文字間の対応関係を示すことができます

PostCSS性能

在PostCSS官方推特上看到，由JavaScript编写的PostCSS比C++编写的libsass还要快3倍。

如果你对上面的性能截图有疑问，可以亲自来 这里测试看看。

开始编写自己的PostCSS插件

PostCSS在自己的 Github上放了一些常用的插件，更多的插件可以在 postcss.parts进行搜索。

但有时候已有的插件不满足我们的需求，这个时候需要编写自己的PostCSS插件，下面我们将一步步创建一个简单的插件，这个插件功能非常简单，如下：

/*   文件位置：src/css/style.css */h1 {  font-family: "\5FAE\8F6F\96C5\9ED1",fontstack('Arial');}

当输入上面的样式时，会生成下面的样式：

/*  文件位置：dist/style.css */h1 {  font-family: "\5FAE\8F6F\96C5\9ED1",tahoma,arial;}

环境准备

我们将以 Gulp作为基础来实现我们的插件，首先创建项目文件夹

mkdir postcss-plugin && cd postcss-plugin

然后快速创建 package.json文件：

npm init --yes

紧接着先安装必备的包

npm i gulp postcss gulp-postcss --save-dev -d

再创建 gulpfile.js并且输入下面内容:

var gulp = require('gulp');var postcss = require('gulp-postcss');gulp.task('css', function(){  var processors = [  ];  return gulp.src('./src/css/*.css')             .pipe(postcss(processors))             .pipe(gulp.dest('./dist'));});

创建插件文件夹

我们在执行 npm install安装的包都放置在 node_modules文件夹下面，这里我们创建PostCSS的插件文件夹，注意： PostCSS的插件命名格式为：postcss-插件名字

# 这里采用命令新建文件夹，你也可以手动创建mkdir node_modules/postcss-fontstack

创建插件入口文件

现在我们可以在 postcss-fontstack文件夹创建入口文件 index.js， PostCSS创建插件的方式如下：

var postcss = require('postcss');module.exports = postcss.plugin('插件名字', function 插件名字(选项){  //这里写插件代码})

那我们可以在 index.js里面贴入下面代码：

var postcss = require('postcss');modules.exports = postcss.plugin('fontstack', function fontstack( options ){  return function( css ){    options = options || {};    var fontstack_config = {      'Arial': 'tahoma,arial',      'Times New Roman': 'TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif'    };    function toTitleCase( str ){      return str.replace(/\w\S*/g,function( txt ){          return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();      });    }    // css.walkRules方法用来遍历每一条css规则    css.walkRules( function( rule ){        // walkDecls方法用来解析属性跟值        rule.walkDecls( function( decl, i ){            var value = decl.value;            if( value.indexOf( 'fontstack(' ) !== -1 ){                var fontstack_requested = value.match(/\(([^)]+)\)/)[1].replace(/["']/g,"");                fontstack_requested = toTitleCase( fontstack_requested );                var fontstack = fontstack_config[ fontstack_requested ];                var firstFont = value.substr( 0, value.indexOf('fontstack(') );                var newValue = firstFont + fontstack;                decl.value = newValue;            }        });    });  }});

在 gulpfile.js引入上面的插件，代码如下：

var gulp = require('gulp');var postcss = require('gulp-postcss');gulp.task('css', function(){  var processors = [  ];  return gulp.src('./src/css/*.css')             .pipe(postcss(processors))             .pipe(gulp.dest('./dist'));});

运行实例

在项目根目录下运行实例，最终实现我们的效果

gulp css

再谈PostCSS

基于 PostCSS能够做到很多 CSS预处理器做不到的事情，未来发展前景还是挺不错的，而且最新的 Atom编辑器也可以下载插件来支持 PostCSS这种语法。

但这就意味着 CSS预处理器过时了么？不会。 PostCSS的出现并不是为了替换掉之前的技术，只是提供多一种思路让我们去考虑，就比如Sass编译后再加 autoprefixer自动补齐浏览器前缀这种做法当前还是比较流行的。

再回到文章最开始说的， PostCSS其实是在打造一个改变CSS开发方式的生态系统。也许暂时我们还是保持传统的开发方式，但未来对于 PostCSS我还是保持关注，它是值得期待的。