PostCSS_html/css_WEB-ITnose の概要

CSS の開発は、他のプログラミング言語と同様、反復的なプロセスです。メジャー バージョンのリリースごとに新しい機能と構文が提供され、スタイルをより適切に記述できるようになります。 CSS 3 は、以前は Javascript を介してのみ可能であった対話機能を可能にします。スタイルの実装をより簡単かつ柔軟にする新しいツールが毎日登場します。

PostCSSは最近おすすめのスタイル加工ツールです。 PostCSS は、プラグインとツールのカスタム エコシステムを通じて CSS を再定義することを目的としています。 Sass や LESS などの前処理メカニズムと同様に、拡張された構文と機能を最新のブラウザー フレンドリーな CSS コードに変換します。

どう聞きますか? JavaScript

JavaScript は他の処理メソッドよりも速くスタイルを変換できます。 Gulp や Grunt などのタスク ランナー ツールを使用すると、ビルド プロセス中にスタイルを変換できます。これは、Sass や LESS のコンパイル プロセスと非常によく似ています。 React や AngularJS などのライブラリやフレームワークを使用すると、CSS コードを JavaScript で直接記述することもできるため、JavaScript を使用してスタイルを変換する道が開かれます。

PostCSS の歴史

PostCSS は、Autoprefixer の開発者である Andrey Sitnik によって開発されました。元々は、JavaScript を通じて CSS を処理する方法でした。 PostCSS 自体は単なる API ですが、巨大なプラグイン エコシステムと組み合わせることで、非常に強力になります。便利なデバッグ機能を提供するために、PostCSS はソース コードのマップも生成し、コードがどのように変換されるかを理解するのに役立つ抽象構文ツリー (AST) も提供します。

PostCSS は Node.js フレームワークを使用しており、プログラミング言語とツールの機能により、PostCSS の変更とカスタマイズが簡単になります。 Sass と LESS は、コンパイラー自体のロックによって提供される機能によって制限されます。

API として、PostCSS を使用すると、必要なプラグインやツールを作成できます。このモジュラー プラットフォーム設計により、このツールはより特化され、機能要件に重点が置かれたものになります。 PostCSS には言語形式の制限はありません。必要に応じて Sass および LESS 構文形式も使用できます。

モジュール化の利点

ほとんどの開発者はプロジェクトを完全にゼロから開始するわけではありません。多くの人は、いくつかの変数、ミックスイン、関数を含む Sass テンプレート プロジェクトを使用します。開発を容易にするために、これらの関数、ミックスイン、グリッド、および共通ツールを含める別のスタイル ファイルを使用します。最終的には、すべてを整理するために 10 個以上のスタイル ファイルが必要になります。

Sass または LESS コード スニペットのライブラリを維持するのは非常に面倒で、プロジェクトが非常に肥大化する可能性があります。多くのプロジェクトには、「万が一に備えて」保管されているめったに使用されないコードなど、未使用のミックスインと関数があります。 PostCSS は、インストールが簡単なプラグアンドプレイ モジュールをサポートしているため、特定の機能を必要とするプロジェクトの開発プロセスが非常に柔軟になります。

PostCSS は、プロジェクト内で関数、ツール、ミックスインを作成するために必要なすべてのコードを抽出し、それらをプラグインにパッケージ化します。このように、プロジェクトごとにプラグインを組み込むことで、必要な機能を導入することができます。

この利点の例は、PostCSS FontPath プラグインです。 Sass では、Web フォントをサポートするためにファイルにミックスインを含めることができないため、@font-face タグを作成する必要があります。

@mixin importfont($font-family, $font-filename, $font-weight :normal, $font-style :normal, $font-stretch :normal) {

@font-face {

font -family: '#{$font-family}';

src: url('#{$font-filename}.eot');

src: url('#{$font-filename}.woff') format('woff'), url('#{$font-filename}.ttf') format('truetype');

font-weight: $font-weight;

font-stretch: $font-stretch;

}}@include importfont('mission script', 'fonts/mission-script-webfont', 300);

プロジェクトでは、上記のように Sass mixin を含める必要はありません。 CSS で次のコードを記述するだけで、PostCSS が Grunt または Gulp を通じて必要なコードに変換します。

@font-face {

font-family: 'My Font';

font-path: '/path/to/font/file'

font-style : 通常;}

この記事の執筆時点では、将来の CSS 構文、ショートカット、ツール、言語拡張機能などをカバーする 100 を超えるプラグインがコミュニティにあります。これは単なるツールではなく、ユーザー数という点では WordPress、Google、Twitter に匹敵します。

PostCSS をワークフローに追加する

PostCSS は JavaScript で記述されており、Gulp や Grunt などのタスク マネージャーを使用してコード内の CSS を変換できます。次のチュートリアルでは、プロジェクトで Gulp または Grunt を使用してワークフローで PostCSS と共同作業する方法を示します。 2 つのうちのどちらを選択するかは実際には重要ではなく、最終的には個人の好みとプロジェクトへの適合性によって決まります。

注: このツールの Gulp および Grunt バージョンのリストは GitHub にあります。開始テンプレートとしていずれかを選択し、必要な拡張機能をインストールできます。

Gulp での PostCSS の構成

Gulp に詳しくない場合は、Callum Macrae の「Building with Gulp」を読んでこのツールを理解して実行することをお勧めします。

ターミナルで次のコマンドを実行して、プロジェクトに PostCSS モジュールをインストールします: npm i gulp-postcss -D

プロジェクトの Gulpfile.js ファイルに、インストールされた PostCSS モジュールを含めて、それをタスクで使用する必要があります。 。開発コードのパスや変換出力ファイルのディレクトリを含む、そこでのパスを変更する必要があります。

var postcss = require('gulp-postcss');gulp.task('styles', function () {

return gulp.src('path/to/dev/style.css')

pipe (postcss([]))

.pipe(gulp.dest(path/to/prod))});

コマンドラインで gulp スタイルを実行してタスクを実行します。

Grunt で PostCSS を設定する

注: Grunt に詳しくない場合は、Mike Cunsolo の「Getting Started with Grunt and Practice」を読むことをお勧めします。これは、このツールについて詳しく学ぶのに役立ちます。

ターミナルで次のコマンドを実行して、プロジェクトに PostCSS モジュールをインストールします: npm i grunt-postcss -D

プラグインがインストールされたら、Gruntfile ファイルでそれを有効にし、次のようにタスクを作成します。プロジェクトのディレクトリ構造に従って cwd 変数と dest 変数を更新する必要があります。

module.exports = function(grunt) {

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

スタイル: {

options: {

プロセッサ; 'dev/'、

src: ['**/*.css']、

dest: 'prod/'

}]

s');}; コマンドラインで

を実行します。このタスクを実行するには grunt スタイルを使用します。

プラグインをインストールする

PostCSS 自体は強力ではなく、プラグインから得られます。おそらく、Gulp と Grunt の以前の実装では、タスクの説明内の配列が空だったことに気づいたかもしれません。これらの配列は、インポートする予定のコミュニティ開発の PostCSS プラグイン、つまり含める必要がある機能を定義できます。

PostCSS GitHub ページでは、検証済みのプラグインのリストを見つけることができます。NPM パッケージと同様に、これらのプラグインもコマンド ラインからインストールできます。多くのプラグインは PostCSS の拡張機能としてのみ機能し、使用するタスク ランナーで直接使用することはできません。たとえば、PostCSS Focus プラグインをインストールすると、ホバーに a:focus 状態が追加されます。

次の例では、コマンド ラインを使用して、NPM を使用してプロジェクトにパッケージをインストールします。

PostCSS プラグインのインストール例のリンク

npm i postcss-focus -D

プラグインはメソッドのパラメーターとして直接使用できますが、コードを明確にするために、次のように構築できます。配列を作成し、その配列にプラグインをパラメータとして入れます。配列には、プラグインを返し、すぐに呼び出される必要なすべての require ステートメントを含めることができます。これについてさらに詳しく知りたい場合は、Ryan Christiani による「JavaScript における第一級市民としての機能」を参照してください。

require('postcss-focus')()

Grunt の場合、変更されたコードは次のとおりです (先ほど作成したprocessorArray 配列を含みます):

varprocessorArray = [

] require( 'postcss -plugin')()];//簡潔にするために省略styles: {

options: {

processors:processorArray },

dist: {

src: 'path/to/dev/style.css',

dest: 'path/to/prod/style.css'

require('postcss-plugin')()] ;gulp.task('styles', function () {

gulp.src('path/ to/dev/style.css')

.pipe(postcss(processorArray))

.pipe(gulp.dest( 'path/to/prod'))});

プラグイン

プラグインがインストールされ、ビルド ツールがコードをコンパイルできるようになったら、PostCSS とそのプラグインの機能を使い始めることができます。最初に行うことは、開発ディレクトリに .css 接尾辞が付いたファイルを作成することです。

「えっ！ CSS ファイル？」 間違いなく、それは CSS ファイルです。 PostCSS が CSS を変換してくれるため、特別な構文は必要なく、従来の CSS を使用するだけです。前処理のメカニズムに精通している場合は、.sass、.scss、.styl、または .less ファイルを非表示にして .css ファイルに戻るため、少し不自然に感じるかもしれません。しかし実際には、これは変化ではなく、変革です。

インストールしたばかりの PostCSS プラグインのスタイルを処理するために、それぞれ grunt と gulp のスタイルに従ってタスク ランナーを実行できます。 CSS ファイルは PostCSS および対応するプラグインによって処理され、出力結果は指定された出力ディレクトリに保存されます。

以下は、プラグインのインストール手順や使用手順など、役立ついくつかのプラグインの紹介です。

Autoprefixer

多数のブラウザーのバージョンやさまざまなデバイスで機能するものを作成するのは骨の折れる作業であり、どの属性に接頭辞を付ける必要があるかを覚えるのはさらに困難です。幸いなことに、Autoprefixer は、これらのブラウザー ベンダー プレフィックスをいつ、どこに追加する必要があるかを教えてくれます。このプラグインを使用すると、さまざまなブラウザーでこれらのプロパティにどのプレフィックスを追加する必要があるかを気にすることなく、最新の機能とプロパティを使用してスタイルを記述する方法だけに集中できます。

コマンドラインからこのプラグインをインストールする方法:

npm i autoprefixer -D

このプラグインを配列に追加すると、プロジェクトの参照を含むオブジェクトを提供できます。インプルメントの配列をサポートする必要があります。利用可能なオプションのリストは、「Browserslist Github Account」で確認できます。

ここで、Autoprefixer プラグインをプロセッサーに追加します:

varprocessorsArray = [

// 簡潔にするために一部省略 require('autoprefixer')({ ブラウザ: ['最後の 2 バージョン', 'ie 6 -8 ', 'Firefox > 20'] })];

ここで提供されるブラウザ サポート リストに従って、対応するブラウザ ベンダー プレフィックスが対応する CSS プロパティと値に追加されます。

これは CSS コードです:

.item {

ディスプレイ: flex;

flex-flow: row Wrap;}

変換された出力は次のようになります。 ;

ディスプレイ: -webkit-box;

-webkit-flex-flow: 行ラップ;

フレックスフロー: 行ラップ;

CSSNext で将来の構文を使用する

CSS4 は近日公開され、ローカル変数、カスタム メディア クエリ、カスタム セレクター、新しい疑似リンクなどの新機能がいくつか追加されます。 CSS4 はこの記事の執筆時点ではすべてのブラウザでサポートされているわけではありませんが、承認後は必ず最新のブラウザでサポートされる予定です。

CSSNext は、すべての CSS4 機能をブラウザーが認識できる CSS3 コードに変換できます。このツールはスタンドアロンで使用することも、PostCSS のプラグインとして使用することもできます。これを他の PostCSS プラグインを含むprocessorsArray に追加できます。

コマンドライン経由で CSSNext プラグインをインストールします

npm i cssnext -D

次に、プラグインをプロセッサに追加します

varprocessorsArray = [

// 簡潔にするために省略しています require( ' cssnext')()];

これで、実稼働コードで CSS4 機能を作成できるようになり、PostCSS はタスク ランナーを介してセマンティクスを変換して今日のブラウザーをサポートします。ブラウザーが新しいセマンティクスをサポートする場合、CSS を開発して変換の出力を置き換えることができます。

ここで CSS を開発します:

// カスタム変数

:root {

--linkColour: purple;}a {

color: var(--linkColour);}// 範囲 @ を持つカスタム メディア クエリCustom-media --only-medium-screen (width >= 500px) and (width <= 1200px);@media (--only-medium-screen) {

/* 中程度のビューポート スタイル */} //カスタムセレクター@custom-selector :-enter :hover, :focus;@custom-selector :-input input, .input, .inputField

a:--enter {

/* ここにスタイルを入力します */ }:--input {

/* 入力フィールドのスタイルはここにあります */}

変換された出力は次のとおりです:

a {

color: purple;}@media (min-width : 500px)そして (max-width: 1200px) {

body {

Background:#00F;

}}} A: フォーカス、A: 入力、.inputfield、.

CSSNext の機能をさらに探索したい場合は、このサイトに、現在 CSSNext でサポートされている CSS4 の機能を試すことができるプレイグラウンドがあります。

SaaS 構文

Sass が優先する前処理プログラミング言語である場合でも、心配する必要はありません。PostCSS を通じてその構文とツールを使用できます。ただし、従来の CSS は、変数、ネスト、およびこれらの機能を使用して従来の CSS ファイルに SaaS 構文を記述することができる PreCSS などのインポート プラグインをまだサポートしていません。

コマンドラインを介してビルドにプラグインを追加し、配列内のパッケージを参照すると、すぐに Sass 構文での記述を開始できます。 Sass から PostCSS に切り替える場合は、ファイル拡張子を .css に変更し、タスク ランナーにパイプすることができます。

次のように、コマンド ラインから PreCSS プラグインをインストールします:

npm i precss -D

次に、プラグインをプロセッサに追加します:

varprocessorsArray = [

// 簡潔にするために省略 require('precss')()];

此外、在这里开公開 CSS：

/*変数*/$blue: #0000ff;$green: #00ff00;$radius: 10px;.square {

background: $blue;

border-radius: $radius;}/*Imports*/@import "partials/_base.css";/*Mixins*/@define-mixin square $dimension {

width: $dimension;

height: $dimension;}/*ネスティング、変数、ミックスイン*/.button {

@mixin square 200px;

背景: $green;

&:hover {

背景: $blue;

}}

然后转换输出：

.square {

background: #0000ff;

border-radius: 10px;}.button {

width: 200px;

高さ: 200ピクセル;

background: #00ff00;}.button:hover {

background: #0000ff;}

使用社区插件扩展 CSS

虽然插件帮助我们より有能な地编書代コードですが、PostCSS の中心ですこれらのツールは、より迅速な方法で、または少なくともより簡単な方法でスタイルを実現しています。 、

量指定

量指定 は、コンピューティング エレメントの CSS と他のセルの数に基づくアプリケーション フォームをより効率的に使用できるようにします。虽然选择器有点QQ オンライン ツールの存在は、これらの文章の書き込みを支援するために、PostCSS を直接利用して独自の選択を使用できるようにするためのものです。

量リクエストを使用し、他のイメージにコンポーネントをインストールすることにより、次のコマンドを実行します:

npm i postcss-quantity-queries -D

および追加到達した処理器：

var processors = [

// 簡潔にするために省略 require('postcss-quantity-queries')()];

インストールすると、一致する要素のアプリケーション パターンにのみ使用できる独自のセレクターを使用できます。

// スタイルを適用するには 'at存在する兄弟要素の最小数

.container> .item:at-least(5) {

background: blue;}

// 「最大」数の兄弟要素が存在する場合にスタイルを適用するには

.item > a:at-most(10) {

color: green;}

// 範囲の「間に」兄弟アイテムの数が存在する場合にスタイルを適用するには

.gallery>> img:between(4, 7) {

width: 25%;}

// 「正確に」 提供されたアイテムが 存在する場合 スタイルを適用するには

.profiles:exactly(4) {

flex: 1 0 50%;}

その後转换出:

//「少なくとも」数の兄弟要素が存在する場合にスタイルを適用するには

.container>> .item:nth-last-child(n+5), .container > .item:nth-last-child(n+5) ~ .item {

background: blue;}

// 「最大」数の兄弟要素が存在する場合にスタイルを適用するには

.item> a:nth-last-child(-n+10):first-child, .item > a:nth-last-child(-n+10):first-child ~ a {

color: green;}

// 範囲の「間に」兄弟アイテムの数が存在する場合にスタイルを適用するには

.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child, .gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child ~ img {

width: 25%;}

// 「正確に」の場合 スタイルを適用するには提供されたアイテムの数が存在します

.profiles:nth-last-child(4):first-child, .profiles:nth-last-child(4):first-child ~ .profiles {

flex: 1 0 50 %;}

短い扩展を通じて、短縮表現のプロパティ

当我们编写样式時、您可能性让你说、「これはもっと短いかもしれません。」の语法プロパティ。那

この PostCSS API を介して、この短縮表現は、位置とサイズの短縮表現に変換されます。公開样式表と一個

コマンド実行によるインストール 短いファイル:

npm i postcss-short -D

にファイルを追加你的处理器：

var プロセッサ = [

require('postcss-short')()];

テキスト プロパティには、次の入力プロパティが含まれます：color、font-style、font-variant、font-weight、font-stretch、text-decoration、text-align、text-rendering、text-transform、white-space、 font-size、行の高さ、文字間隔、単語間隔、およびフォントファミリー。

在这里开発行 CSS：

p {

text: 300 uppercase dimgrey center 1.6rem 1.7 .05em;}

然后转换输出：

p {

color: dimmgrey;

フォントの太さ: 300;

text-align: center;

text-transform: 大文字;

font-size: 25px;

font-size: 1.6rem;

行の高さ: 1.7;

letter-spacing: .05em;}

この文書内の位置プロパティには、上、左、右、下の値が含まれます。この値の順序は時間方向であり、法では 1 から 4 の値が使用されます。

ここで CSS を公開すると、次のようになります:

position: absolute 10px * *;}.topNav {

位置：修正0**0;}。モーダル{

位置：40％25％を修正;}

转换输出：

セクション{

位置：絶対;

top: 10px;}.topNav {

position: fixed;

トップ: 0;

左: 0;}.modal {

位置: 固定;

トップ: 40%;

右: 25%;

下位: 40%;

左: 25%;} 🎜

これは私たちの業界にとって何を意味しますか?

今日 PostCSS を使用することでメリットを享受することは十分に可能です。 Sass と LESS をコンパイルするプロセスと同様に、PostCss を処理するようにタスク実行コンポーネントを変更することで、PostCSS をワークフローに統合できます。 PreCSS のようなプラグインを既存の Sass プロジェクトに組み込むと、構文を変換することなく PostCSS に移植できます。

この記事を書いている現在、CSS を書くのに最適な場所はどこなのかについて議論が続いています。 React などのライブラリの人気により、コンポーネント内にスタイルを記述するという考えが勢いを増しており、JavaScript でスタイルを直接コンパイルできるようになります。これはまだ議論の段階ですが、確かに PostCSS を使用してスタイルを変更するための解決策です。

業界で話題を呼んでいるもう 1 つのプロジェクトは、ローカル ファイルにスタイルが含まれており、オンデマンドで使用できる CSS モジュールです。この概念は JavaScript 界隈で人気になっています。そして、React や JSX などのフロントエンド言語間の境界線がますます曖昧になるにつれて、CSS と JavaScript の総合力を無視するのが難しくなってきています。

PostCSS は、構文と機能をカスタマイズする新しい方法で CSS を継承していますが、言語とその複雑さをマスターしようとしている初心者にとっては課題が生じる可能性があります。 PostCSS を使用する中級開発者とプロジェクトに取り組んでいる場合は、Sass と同様に、PostCSS は書き方を効率化するシンプルなオーサリング ツールです。

今すぐ PostCSS を使用しましょう

今後数年間で、CSS の使用方法には多くの変化が起こるでしょう。すべてのプロジェクトには異なるニーズがあり、制作方法を適応させる必要があります。 PostCSS のようなモジュール式エコシステムを使用すると、プロジェクトを完了するために必要な機能を選択して使用できます。

PostCSS の世界とそこで利用可能なすべてのプラグインを探索してみてください。これはコミュニティ プロジェクトであるため、エコシステムは人々がそれを使用し、そのためのプラグインを作成する場合にのみ成長します。さらにプラグインを探索するには、NPM で利用可能なパッケージを参照し、PostCSS Playground でパフォーマンスをテストします。

(rb, al, ml)

この記事は、Open Source China Community [http://www.oschina.net] から転載されました

この記事のタイトル: Introduction to PostCSS

この記事のアドレス:

http://www.oschina .net/translate/introduction-to-postcss 翻訳参加: zicode、crossmix、xueluowuhenxdj、一日中

英語原文: An Introduction To PostCSS