Web開発者はSASS CSS Preprocessorsが大好きです。 State of CSS調(diào)査からのSASSの見解によると、すべての開発者はSASSを理解し、開発者の89％が定期的に使用し、開発者の88％が非常に満足しています。

多くのWebパッケージにはSASS処理が含まれていますが、PostCSを知らずに使用することもできます。 PostCSSは、主にAutoprefixerプラグインで知られており、必要に応じてCSSプロパティに-webkit、-moz、および-msベンダーのプレフィックスを自動(dòng)的に追加します。そのプラグインシステムは、より多くのことができることを意味します... たとえば、SASSコンパイラを使用せずに.SCSファイルをコンパイルできます。 このチュートリアルでは、SASSの構(gòu)文をコンパイルし、より多くの機(jī)能を追加するカスタムCSSプリプロセッサを作成する方法について説明します。いくつかのnode.jsを知っており、特定のCSSニーズを持っている人にとっては理想的です。

キーポイント

構(gòu)成可能性とカスタマイズ：PostCSSは、SASSと比較して高度に構(gòu)成可能な環(huán)境を提供します。プラグインアーキテクチャに基づいて実行され、各プラグインは特定のタスクを?qū)g行し、開発者が特定のプロジェクトのニーズに応じて設(shè)定をカスタマイズできるようにします。

• パフォーマンスノート：DARTベースのSASSコンパイラは高速ですが、JavaScript上に構(gòu)築されたPostCSSは遅くなる可能性があります。ただし、既にPostCSSを使用しているプロジェクトの場合、速度の差は無視できる場合があり、実行可能な単一プロセスソリューションになります。
• インストールとセットアップ：PostCSSは、さまざまなビルドツールと統(tǒng)合したり、コマンドラインから実行したりできます。 SASSのような環(huán)境の基本的な設(shè)定では、
、
• 、postcss-scss、postcss-advanced-variablesなどのいくつかのプラグインをインストールする必要があります。 postcss-nested autoprefixerプラグインを使用して機(jī)能を強(qiáng)化する：PostCSは従來のプリプロセッサ機(jī)能を超えており、そのプラグインは設(shè)計(jì)トークンを処理し、メディアクエリを最適化し、資産を管理し、環(huán)境に基づいて條件付きでCSS圧縮を?qū)g行できます。
開発スタックを簡素化する可能性：既にPostCSSを使用しているチームの場合、開発スタックのSASSを完全に排除し、PostCSSに依存して、SASSのような構(gòu)文や機(jī)能を処理するすべてのCSS処理ニーズを満たすことが可能です。
• クイックスタート

postCSSサンプルプロジェクトはGitHubからクローニングできます。 Node.jsが必要なので、すべての依存関係を取得するにはNPMインストールを?qū)g行します。

デモSRC/SCSS/MAIN.SCSSソースコードを構(gòu)築して、次のコマンドを使用して/CSS/Main.CSSを作成します。

次のコマンドを使用して、ファイルが変更されたときに自動(dòng)的にコンパイルします。

<code>npm run css:dev</code>

ctrl

|を押して監(jiān)視を終了します。

<code>npm run css:watch</code>

これら2つのオプションは、開発者ツールの元のソースファイルを參照するbuild/css/main.css.mapにソースマップも作成します。

生産レベルの圧縮CSSソースマップを使用してコンパイルできます。 詳細(xì)については、readme.mdファイルを參照してください。 SASSをPostCSSに置き換える必要がありますか？

SASSコンパイラには問題はありませんが、次の要因を考慮してください。

モジュール依存関係

DART SASSの最新バージョンは、node.js NPMパッケージマネージャーを使用してグローバルにインストールできます。

<code>npm run css:dev</code>

次のコマンドを使用してsass .scssコードをコンパイルします

ソースマップを自動(dòng)的に生成し（ - ノーソースマップはそれらを閉じます）、ソースファイルが変更されたときに自動(dòng)的にコンパイルするために-Watchを追加します。

<code>npm run css:watch</code>

SASSインストールスペースの最新バージョンは5MB未満です。

POSTCSS

はより少ないリソースを必要とするはずであり、自動(dòng)プレフィックスと圧縮を備えた基本的なSASSスタイルのコンパイラには1MB未満のスペースが必要です。実際、node_modulesフォルダーは60MBを超えるまで展開され、より多くのプラグインが追加されると急速に増加します。これは主に、NPMに他の依存関係をインストールすることです。 PostCSSがそれらを使用できない場合でも、軽量の代替品と見なすことはできません。

ただし、既にAutoprefixerまたはその他の目的にPostCSSを使用している場合は、SASSを必要としない場合があります。

処理速度

スロールビーベースのSASSコンパイラは長い間消えており、最新バージョンではコンパイルされたDARTランタイムを使用しています。

それは非常に速い

です。

postcssは純粋なJavaScriptであり、ベンチマークは異なりますが、同じソースコードをコンパイルすると3倍遅くなる可能性があります。

ただし、SASSの後に既にPostCSを?qū)g行している場合、この速度の違いは目立ちません。 2段階のプロセスは、PostCSのみを使用するよりも遅くなる可能性があります。その作業(yè)の多くには、CSS特性のトークン化が含まれます。

custom

SASS言語には、変數(shù)、ネスト、部品、ミキシングなど、多數(shù)の機(jī)能が含まれています。しかし、いくつかの欠點(diǎn)があります：

新しい機(jī)能を簡単に追加することはできません。

1. HSLAの色をRGBに変換するオプションが必要な場合があります。カスタム関數(shù)の書き込みは可能かもしれませんが、他の要件は不可能です - たとえば、背景畫像としてインラインSVG。
   機(jī)能セットを簡単に制限することはできません。
2. あなたのチームがネストまたは@extendを使用しないことを好むかもしれません。 LINTルールは役立ちますが、SASSが有効な.SCSSファイルをコンパイルすることを防ぎません。
   PostCSSの構(gòu)成が簡単です。

postcss自體は何もしません。機(jī)能を処理するには、1つ以上の使用可能なプラグインが必要です。ほとんどのプラグインは単一のタスクを?qū)g行するため、ネストが必要ない場合は、ネストされたプラグインを追加しないでください。必要に応じて、node.jsの機(jī)能を活用する標(biāo)準(zhǔn)のJavaScriptモジュールを使用して、獨(dú)自のプラグインを作成できます。

postcss

をインストールします

PostCSSは、Webpack、Parcel、Gulp.js、およびその他のビルドツールで使用できますが、このチュートリアルではコマンドラインから実行する方法を示しています。

必要に応じて、NPM initを使用して新しいnode.jsプロジェクトを初期化します。次のモジュールをインストールして、部分的、可変、ミックス、ネスト、およびオートプレフィックスのプラグインを使用して基本.SCSSの解析を?qū)g行してPostCSSをセットアップします。

サンプルプロジェクトと同様に、PostCSSとそのプラグインはローカルにインストールされます。これは、プロジェクトに異なるコンピレーション要件がある場合に実用的なオプションです。

注：postCSSはJavaScriptファイルからのみ実行できますが、PostCSS-CLIモジュールはコマンドラインから呼び出すことができるラッパーを提供します。 PostCSS-SCSSモジュールにより、PostCSSは.SCSSファイルを読み取ることができますが、それらを変換しません。

autoprefixer構(gòu)成

Autoprefixerは、BrowserSlistを使用して、サポートするブラウザのリストに基づいて必要なベンダーのプレフィックスを決定します。最も簡単な方法は、Package.jsonの「browserslist」配列として定義することです。次の例では、ブラウザが市場シェアの少なくとも2％を持っている場合、ベンダープレフィックスを追加します。

<code>npm run css:dev</code>

最初のビルド

通常、必要なすべての部分/コンポーネントファイルをインポートする?yún)g一のルートSASS .SCSSファイルがあります。たとえば、

<code>npm run css:watch</code>

コンパイルは、NPX PostCSSを?qū)g行し、その後に入力ファイル、-Outputファイル、および必要なオプションを?qū)g行することで開始できます。たとえば、

<code>npm run css:build</code>

このコマンド：

Analysis./src/scss/main.scss
./build/css/main.cssへの出力
node_env環(huán)境変數(shù)を開発に設(shè)定します
出力外部ソースマップファイル
詳細(xì)な出力とエラーメッセージを設(shè)定します
postcss-SCSS SASSパーサーを設(shè)定し、
プラグインPOSCSS-ADVANCE-VARIABLES、POSTCSS-NESTED、AUTOPREFIXERを使用して、部品、変數(shù)、ミキシング、ネスティング、オートプレフィキサーを処理します

または、.scssファイルを変更するときに自動(dòng)的にコンパイルするために-watchを追加することができます。

postCSS構(gòu)成ファイルを作成

プラグインが長い場合、コマンドラインの処理がすぐに難しくなる可能性があります。 NPMスクリプトとして定義できますが、PostCSS構(gòu)成ファイルは、他の可能性を提供するよりシンプルなオプションです。

POSTCSS構(gòu)成ファイルは、Postcss.config.jsという名前のJavaScriptモジュールファイルであり、通常はプロジェクトのルートディレクトリに保存されます（またはPostCSSを?qū)g行するディレクトリ）。モジュールは、単一の関數(shù)をエクスポートする必要があります：

<code>npm install -g sass</code>

PostCSSコマンドによって設(shè)定されたプロパティを使用してCFGオブジェクトを渡します。たとえば、

<code>sass [input.scss] [output.css]</code>

これらのプロパティを確認(rèn)してそれに応じて対応できます - たとえば、開発モードで実行しているかどうか、および.SCS入力ファイルを処理しているかどうかを判斷できます。

関數(shù)は、プロパティ名がpostCSS-CLIコマンドラインオプションと一致するオブジェクトを返す必要があります。次の構(gòu)成ファイルは、上記で使用されている長いクイックスタートコマンドをコピーします：

<code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>

短いコマンドでpostCSを?qū)g行できるようになりました：

<code>"browserslist": [
  "> 2%"
],</code>

次のことは、注意すべきことです

<code>// 根Sass文件
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// 等。</code>

- 冗長はオプションです：postcss.config.jsには設(shè)定されていません。

SASS構(gòu)文解析は、入力が.SCSSファイルである場合にのみ適用されます。それ以外の場合、デフォルトは標(biāo)準(zhǔn)のCSSになります。

• ソースマップは、-ENVが開発に設(shè)定されている場合にのみ出力されます。
• 自動(dòng)コンパイル用に-Watchを追加できます。
postcss.config.jsを別のディレクトリに配置する場合は、-config /mycfg /など、-configオプション - configオプションで參照できます。例プロジェクトでは、上記の構(gòu)成はconfig/postcss.config.jsにあります。 npm run cssを?qū)g行することで參照されます：基本、呼び出します：

• <code>npm run css:dev</code>

  プラグインを追加

  次のセクションでは、追加の.scss構(gòu)文を解析したり、SASSコンパイラの範(fàn)囲を超えて処理機(jī)能を提供できるPostCSSプラグインの例を示します。

  デザイントークンを使用

  設(shè)計(jì)トークンは、全社的なフォント、色、間隔などの変數(shù)を保存するためのテクノロジーに依存しない方法です。トークン名値ペアをJSONファイルに保存できます。

  <code>npm run css:watch</code>

  次に、Web、Windows、MacOS、iOS、Linux、Android、またはその他のアプリケーションでそれらを紹介します。
  SASSは設(shè)計(jì)トークンを直接サポートしませんが、変數(shù)屬性を持つJavaScriptオブジェクト（名前と値のペアを保持します）は、既存のPostCSS-Advanced-Variables postcssプラグインに渡すことができます：

  >

  <code>npm run css:build</code>

  プラグインは、すべての値を任意の部分で使用できるグローバルSASS $変數(shù)に変換します。フォールバック値を設(shè)定して、トークンに欠落している場合でも変數(shù)が利用可能であることを確認(rèn)できます。たとえば、

  <code>npm install -g sass</code>

  トークン変數(shù)は、任意の.scssファイルで參照できます。たとえば、

  <code>sass [input.scss] [output.css]</code>

  プロジェクトの例では、token.jsonファイルが定義されています。
  サスマップサポートを追加
  SASSマップはキー価値オブジェクトです。マップゲット関數(shù)は、名前で値を見つけることができます。
  次の例では、メディアクエリブレークポイントをSASSマップとして定義し、応答ミックスを使用して指定された値を取得します。
  デフォルトのプロパティとメディアクエリの変更は、同じセレクターで定義できます。たとえば、

  <code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>

  CSSにコンパイルされた

  ：

  <code>"browserslist": [
    "> 2%"
  ],</code>

  postcss-map-getプラグインがSASSマップ処理を追加します。次のコマンドでインストールしてください：

  <code>// 根Sass文件
  // src/scss/main.scss
  @import '_variables';
  @import '_reset';
  @import 'components/_card';
  // 等。</code>

  次に、postcss.config.js：

  <code>npx postcss ./src/scss/main.scss \
      --output ./build/css/main.css \
      --env development \
      --map \
      --verbose \
      --parser postcss-scss \
      --use postcss-advanced-variables postcss-nested autoprefixer</code>

  に追加します
  メディアクエリの最適化を追加

  <code>// postcss.config.js
  module.exports = cfg => {
  
    // ... 配置 ...
  
  };</code>

  メディアクエリを追加したため、それらを組み合わせてモバイル優(yōu)先順位で並べ替えると便利です。たとえば、次のcss：

  は

  <code>{
    cwd: '/home/name/postcss-demo',
    env: 'development',
    options: {
      map: undefined,
      parser: undefined,
      syntax: undefined,
      stringifier: undefined
    },
    file: {
      dirname: '/home/name/postcss-demo/src/scss',
      basename: 'main.scss',
      extname: '.scss'
    }
  }</code>

  にマージできます
  これはSASSでは不可能ですが、PostCSS PostCSS-Sort-Media-Queriesプラグインを使用して実裝できます。次のコマンドでインストールしてください：

  <code>// postcss.config.js
  module.exports = cfg => {
  
    const
      dev = cfg.env === 'development',
      scss = cfg.file.extname === '.scss';
  
    // ... 配置 ...
  
  };</code>

  次に、postcss.config.js：

  <code>// postcss.config.js
  module.exports = cfg => {
  
    const
      dev = cfg.env === 'development',
      scss = cfg.file.extname === '.scss';
  
    return {
  
      map: dev ? { inline: false } : false,
      parser:  scss ? 'postcss-scss' : false,
      plugins: [
        require('postcss-advanced-variables')(),
        require('postcss-nested')(),
        require('autoprefixer')()
      ]
  
    };
  
  };</code>

  に追加します
  アセット処理を追加

  <code>npx postcss ./src/scss/main.scss \
      --output ./build/css/main.css \
      --env development \
      --verbose</code>

  資産管理はSASSでは提供されていませんが、PostCSSアセットにより簡単になります。プラグインは、CSSイメージURLを解析し、キャッシュのクリアを追加し、畫像サイズを定義し、base64表記を使用してファイルをインランス化します。たとえば、

  compiled：

  <code>npx postcss src/scss/main.scss \
      --output build/css/main.css \
      --env development \
      --verbose \
      --config ./config/</code>

  次のコマンドを使用して、プラグインをインストールします：

  <code>{
  
    "font-size": "16px",
  
    "font-main": "Roboto, Oxygen-Sans, Ubuntu, sans-serif",
    "lineheight": 1.5,
  
    "font-code": "Menlo, Consolas, Monaco, monospace",
    "lineheight-code": 1.2,
  
    "color-back": "#f5f5f5",
    "color-fore": "#444"
  
  }</code>

  その後、postcss.config.jsに追加します。この場合、プラグインはSRC/畫像/ディレクトリで畫像を検索するように指示されます。

  <code>// PostCSS配置
  module.exports = cfg => {
  
    // 將令牌導(dǎo)入為Sass變量
    const variables = require('./tokens.json'); // 新的
  
    const
      dev = cfg.env === 'development',
      scss = cfg.file.extname === '.scss';
  
    return {
  
      map: dev ? { inline: false } : false,
      parser:  scss ? 'postcss-scss' : false,
      plugins: [
        require('postcss-advanced-variables')({ variables }), // 已更新
        require('postcss-nested')(),
        require('autoprefixer')()
      ]
  
    };
  
  };</code>

  圧縮を追加

  <code>// 如果tokens.json中未設(shè)置“color-back”值，則將默認(rèn)背景顏色設(shè)置為#FFF
  $color-back: #fff !default;</code>

  CSSNANOは、CSS圧縮の標(biāo)準(zhǔn)を設(shè)定します。圧縮には、他のプラグインよりも多くの処理時(shí)間が必要になる場合があるため、生産にのみ適用できます。

  次のコマンドを使用してcssnanoをインストールします。

  その後、postcss.config.jsに追加します。この場合、node_envが開発以外に設(shè)定されている場合にのみ圧縮が実行されます。

  <code>npm run css:dev</code>

  設(shè)定-ENV生産へのENVは圧縮をトリガーします（そしてソースマップを削除します）：

  <code>npm run css:watch</code>

  postcssに移行しますか？
  POSTCSSは、.SCSSファイルをコンパイルし、標(biāo)準(zhǔn)のSASS言語を強(qiáng)化（または制限）できる強(qiáng)力で構(gòu)成可能なツールです。既にAutoprefixerにPostCSSを使用している場合は、お?dú)荬巳毪辘螛?gòu)文を保持しながらSASSコンパイラを完全に削除できます。
  その他のリンク：
  SASS Language Reference
  postcssホームページ
  postcssプラグインリスト
  • PostCSSプラグインの検索可能なディレクトリ
  NPMJS.comのPOSTCSSプラグイン
  postcssプラグインを書く
  postcss cli
  • postcss
  についてよく尋ねる質(zhì)問
  postcssとは何ですか？ PostCSSは、JavaScriptプラグインを使用してスタイルを変換するためのツールです。一般的にWeb開発で使用されており、さまざまなプラグインを使用してCSSを処理して標(biāo)準(zhǔn)のCSSの機(jī)能を強(qiáng)化および拡張します。

  postCSSの一般的なユースケースは何ですか？ PostCSSは通常、自動(dòng)プレフィックス、コードチェック、圧縮、可変交換、將來のCSS構(gòu)文互換性などのタスクに使用されます。標(biāo)準(zhǔn)のCSSの機(jī)能を強(qiáng)化するための柔軟でモジュラーシステムを提供します。

  私のプロジェクトのPostCSSをインストールしてセットアップする方法は？ NPM（ノードパッケージマネージャー）を使用して、PostCSSとそのプラグインをインストールできます。インストール後、プロジェクトとその設(shè)定のプラグインを定義するには、構(gòu)成ファイル（通常はpostcss.config.jsと呼ばれる）を作成する必要があります。

  自動(dòng)プレフィックスとは何ですか？また、なぜPostCSSで役立つのですか？自動(dòng)プレフィックスは、PostCSSがCSSプロパティにベンダープレフィックスを自動(dòng)的に追加して、異なるブラウザーとの互換性を確保するプロセスです。これにより、開発者は手動(dòng)ベンダー固有のプレフィックスを避けて、クリーナーコードを作成するのに役立ちます。

以上がSASSの構(gòu)成可能な代替品としてPostCSSを使用する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。