SASSの構成可能な代替品としてPostCSSを使用する方法

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

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

キーポイント

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

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

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

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

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

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

ctrl

|を押して監視を終了します。

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

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

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

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

モジュール依存関係

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

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

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

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

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

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

POSTCSS

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

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

処理速度

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

それは非常に速い

です。

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

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

custom

SASS言語には、変数、ネスト、部品、ミキシングなど、多数の機能が含まれています。しかし、いくつかの欠点があります：

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

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

postcss自体は何もしません。機能を処理するには、1つ以上の使用可能なプラグインが必要です。ほとんどのプラグインは単一のタスクを実行するため、ネストが必要ない場合は、ネストされたプラグインを追加しないでください。必要に応じて、node.jsの機能を活用する標準のJavaScriptモジュールを使用して、独自のプラグインを作成できます。

postcss

をインストールします

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

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

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

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

autoprefixer構成

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

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

最初のビルド

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

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

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

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

このコマンド：

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

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

postCSS構成ファイルを作成

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

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

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

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

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

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

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

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

短いコマンドでpostCSを実行できるようになりました：

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

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

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

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

SASS構文解析は、入力が.SCSSファイルである場合にのみ適用されます。それ以外の場合、デフォルトは標準のCSSになります。

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

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

  プラグインを追加

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

  デザイントークンを使用

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

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

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

  >

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

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

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

  トークン変数は、任意の.scssファイルで参照できます。たとえば、

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

  プロジェクトの例では、token.jsonファイルが定義されています。
  サスマップサポートを追加
  SASSマップはキー価値オブジェクトです。マップゲット関数は、名前で値を見つけることができます。
  次の例では、メディアクエリブレークポイントを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>

  メディアクエリを追加したため、それらを組み合わせてモバイル優先順位で並べ替えると便利です。たとえば、次の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 => {
  
    // 将令牌导入为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中未设置“color-back”值，则将默认背景颜色设置为#FFF
  $color-back: #fff !default;</code>

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

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

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

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

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

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

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

  postCSSの一般的なユースケースは何ですか？ PostCSSは通常、自動プレフィックス、コードチェック、圧縮、可変交換、将来のCSS構文互換性などのタスクに使用されます。標準のCSSの機能を強化するための柔軟でモジュラーシステムを提供します。

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

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

以上がSASSの構成可能な代替品としてPostCSSを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。