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-scss、postcss-advanced-variablesなどのいくつかのプラグインをインストールする必要があります。 postcss-nested
autoprefixerプラグインを使用して機能を強化する：PostCSは従来のプリプロセッサ機能を超えており、そのプラグインは設計トークンを処理し、メディアクエリを最適化し、資産を管理し、環境に基づいて条件付きでCSS圧縮を実行できます。 次のコマンドを使用して、ファイルが変更されたときに自動的にコンパイルします。
<code>npm run css:dev</code>
|を押して監視を終了します。
<code>npm run css:watch</code>
生産レベルの圧縮CSSソースマップを使用してコンパイルできます。 詳細については、readme.mdファイルを参照してください。 SASSをPostCSSに置き換える必要がありますか？
SASSコンパイラには問題はありませんが、次の要因を考慮してください。DART SASSの最新バージョンは、node.js NPMパッケージマネージャーを使用してグローバルにインストールできます。
<code>npm run css:dev</code>
ソースマップを自動的に生成し（ - ノーソースマップはそれらを閉じます）、ソースファイルが変更されたときに自動的にコンパイルするために-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言語には、変数、ネスト、部品、ミキシングなど、多数の機能が含まれています。しかし、いくつかの欠点があります：
新しい機能を簡単に追加することはできません。
機能セットを簡単に制限することはできません。
PostCSSの構成が簡単です。
postcss
をインストールします
PostCSSは、Webpack、Parcel、Gulp.js、およびその他のビルドツールで使用できますが、このチュートリアルではコマンドラインから実行する方法を示しています。サンプルプロジェクトと同様に、PostCSSとそのプラグインはローカルにインストールされます。これは、プロジェクトに異なるコンピレーション要件がある場合に実用的なオプションです。
注：postCSSはJavaScriptファイルからのみ実行できますが、PostCSS-CLIモジュールはコマンドラインから呼び出すことができるラッパーを提供します。 PostCSS-SCSSモジュールにより、PostCSSは.SCSSファイルを読み取ることができますが、それらを変換しません。
Autoprefixerは、BrowserSlistを使用して、サポートするブラウザのリストに基づいて必要なベンダーのプレフィックスを決定します。最も簡単な方法は、Package.jsonの「browserslist」配列として定義することです。次の例では、ブラウザが市場シェアの少なくとも2％を持っている場合、ベンダープレフィックスを追加します。
<code>npm run css:dev</code>
<code>npm run css:watch</code>
<code>npm run css:build</code>
postCSS構成ファイルを作成
POSTCSS構成ファイルは、Postcss.config.jsという名前のJavaScriptモジュールファイルであり、通常はプロジェクトのルートディレクトリに保存されます（またはPostCSSを実行するディレクトリ）。モジュールは、単一の関数をエクスポートする必要があります：
<code>npm install -g sass</code>
<code>sass [input.scss] [output.css]</code>
関数は、プロパティ名が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になります。<code>npm run css:dev</code>
次のセクションでは、追加の.scss構文を解析したり、SASSコンパイラの範囲を超えて処理機能を提供できるPostCSSプラグインの例を示します。
設計トークンは、全社的なフォント、色、間隔などの変数を保存するためのテクノロジーに依存しない方法です。トークン名値ペアをJSONファイルに保存できます。
<code>npm run css:watch</code>
SASSは設計トークンを直接サポートしませんが、変数属性を持つJavaScriptオブジェクト（名前と値のペアを保持します）は、既存のPostCSS-Advanced-Variables postcssプラグインに渡すことができます：
>
<code>npm run css:build</code>
<code>npm install -g sass</code>
<code>sass [input.scss] [output.css]</code>
サスマップサポートを追加
次の例では、メディアクエリブレークポイントを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>は
<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>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>
その後、postcss.config.jsに追加します。この場合、node_envが開発以外に設定されている場合にのみ圧縮が実行されます。
<code>npm run css:dev</code>
設定-ENV生産へのENVは圧縮をトリガーします（そしてソースマップを削除します）：
<code>npm run css:watch</code>
その他のリンク：
postCSSの一般的なユースケースは何ですか？ PostCSSは通常、自動プレフィックス、コードチェック、圧縮、可変交換、将来のCSS構文互換性などのタスクに使用されます。標準のCSSの機能を強化するための柔軟でモジュラーシステムを提供します。
私のプロジェクトのPostCSSをインストールしてセットアップする方法は？ NPM（ノードパッケージマネージャー）を使用して、PostCSSとそのプラグインをインストールできます。インストール後、プロジェクトとその設定のプラグインを定義するには、構成ファイル（通常はpostcss.config.jsと呼ばれる）を作成する必要があります。
自動プレフィックスとは何ですか？また、なぜPostCSSで役立つのですか？自動プレフィックスは、PostCSSがCSSプロパティにベンダープレフィックスを自動的に追加して、異なるブラウザーとの互換性を確保するプロセスです。これにより、開発者は手動ベンダー固有のプレフィックスを避けて、クリーナーコードを作成するのに役立ちます。
以上がSASSの構成可能な代替品としてPostCSSを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
