Sass関連Gulpプラグイン(全48種)一覧

# Gulpプラグイン(Sass関連)
2019年7月現在、npmに公開されているSass関連のGulpプラグイン48種を集めました。
Sassでのデザインを少しでも自動化し、正確かつ早いコーディングを実現したいと考えたことが収集の理由です。

3年以上更新のないプラグインや、非推奨となったもの、GitHubが非公開となっているものは除いています。また、翻訳に関しては直訳した文章を載せているため、一部その用途が読みづらい箇所があります。
この点は追々修正を加えていき、使用頻度や人気の安定したプラグインに絞り込んでいく予定です。

**見出しをクリックすると、各プラグインのページに飛びます。**

## [gulp-json-data-to-sass](https://www.npmjs.com/package/gulp-json-data-to-sass/)
JSONファイルの入力を受け取り、SCSS変数を出力するGulpプラグイン。
フォントや背景のカラー、幅や高さなど使い回したいプロパティと値をJSONファイル化しておくことで、Sassに何度も記述する手間が省けます。タイプミスによる時間のロスも減るため便利。

## [gulp-scss-lint](https://www.npmjs.com/package/gulp-scss-lint/)
`.scss`ファイルを` scss-lint`で検証します。
エラー数とその箇所を表示してくれるため、Sassファイル上を目視でチェックする手間が省けます。

## [gulp-shopify-sass](https://www.npmjs.com/package/gulp-shopify-sass/)
@importの順序で定義されたSassファイルを連結する。

## [gulp-style-aliases](https://www.npmjs.com/package/gulp-style-aliases/)
@aliasルールを使用してCSS、less、およびSASSプロパティのカスタムエイリアスを作成できるGulpプラグイン。

## [gulp-cssdepth-check](https://www.npmjs.com/package/gulp-cssdepth-check/)
最大CSS深度をチェックするためのGulpプラグイン。

## [gulp-rn-css](https://www.npmjs.com/package/gulp-rn-css/)
scss / sass / css / lessファイルをjavascriptオブジェクトに変換するためのgulpプラグイン。

## [gulp-sass-glob](https://www.npmjs.com/package/gulp-sass-glob/)
sass / scssファイルでglobインポートを使用するためのタスクを作成します。

## [gulp-sass-import-once](https://www.npmjs.com/package/gulp-sass-import-once/)
Sassファイル間で重複しているインポートを再帰的に削除します。

## [gulp-sass-pedigree](https://www.npmjs.com/package/gulp-sass-pedigree/)
Incremental Caching System for Gulp and NodeSass
GulpとNodeSassのためのインクリメンタルキャッシングシステム。

## [gulp-sass-variables](https://www.npmjs.com/package/gulp-sass-variables/)
Sass変数をgulpストリームに追加して、Sassビルドプロセスで例えば環境変数を使用できるようにします。文字列、数字、およびブール値をサポートします。

## [gulp-sass-vars](https://www.npmjs.com/package/gulp-sass-vars/)
sassファイルに変数を挿入する。

## [gulp-sass-vars-to-js](https://www.npmjs.com/package/gulp-sass-vars-to-js/)
Sass変数をJavaScriptにエクスポート。

## [gulp-sassvg](https://www.npmjs.com/package/gulp-sassvg/)
SVGファイルを取得し、それらをsass-mixinに変換します。これは後で変更された（例えば色付けされた）背景画像を作成するために使用されます。

## [ho-vom-til](https://www.npmjs.com/package/ho-vom-til/)
ho-vom-tilは、ほとんどすべてのSSHクライアントのターミナルウィンドウ内で使用できるいくつかの楽しいツールを可能にします。

## [m2-sass-inlinesvg](https://www.npmjs.com/package/m2-sass-inlinesvg/)
svgファイルをsass関数に変換し、それをbackground-imageのインラインsvgとして使用できるようにします。 gulp-sassvgに基づきます。

## [gulp-sass-inline-svg](https://www.npmjs.com/package/gulp-sass-inline-svg/)
svgファイルをsass関数に変換し、それをbackground-imageのインラインsvgとして使用できるようにします。 gulp-sassvgに基づきます。

## [organizze-gulp-sass-bulk-import](https://www.npmjs.com/package/organizze-gulp-sass-bulk-import/)
SCSSにディレクトリをインポートする。

## [gulp-svg-inline-scss](https://www.npmjs.com/package/gulp-svg-inline-scss/)
svgファイルをsass関数に変換し、それをbackground-imageのインラインsvgとして使用できるようにします。 gulp-sassvgに基づきます。

## [@dietechniker/gulp-sass-dependency-tracker](https://www.npmjs.com/package/@dietechniker/gulp-sass-dependency-tracker/)
安全なコンパイルを最適化するNodeJS gulpパッケージ - 実際に変更したものだけをコンパイルします。

## [@spomni/gulp-dart-sass](https://www.npmjs.com/package/@spomni/gulp-dart-sass/)
Sass用のGulpプラグイン。

## [aun-gulp-sass](https://www.npmjs.com/package/aun-gulp-sass/)
Ruby Sassを使用してSassをCSSにコンパイルします。

## [gulp-angular2-embed-sass](https://www.npmjs.com/package/gulp-angular2-embed-sass/)
sassからcssまでのstyleUrlsをコンパイルし、それらをstyleの下のストリングとして含めるためのgulpプラグイン。

## [gulp-better-sass-inheritance](https://www.npmjs.com/package/gulp-better-sass-inheritance/)
変更されたsass / scssファイルとその依存関係（拡張、インクルード、またはインポート）のみを再コンパイルします。

## [gulp-bmn-sass](https://www.npmjs.com/package/gulp-bmn-sass/)
目的のためのsassのためのGulpプラグイン。

## [gulp-css-critical](https://www.npmjs.com/package/gulp-css-critical/)
クリティカルCSSのためのGulp。
※クリティカルCSSとは
CSSにおけるブラウザ表示パフォーマンスのTipsを指す。
導入することでレンダリングブロックを回避し、ファーストビューの表示を高速化。
これにより、ページ表示の体感速度が上がる。
ただし、ページ全体の読み込み速度はほぼ変わらず、あくまでファーストビュー表示高速化のための施策。
参考：[クリティカルCSSとは](https://blog.yuhiisk.com/archive/2015/06/22/about-critical-css.html#CSS)

## [gulp-css-preprocessor](https://www.npmjs.com/package/gulp-css-preprocessor/)
ファイル拡張子に基づくgulp用の少ない/ Scss / Sass / Stylusプラグイン。

## [gulp-css-spriter](https://www.npmjs.com/package/gulp-css-spriter/)
CSSソースファイルからのスプライトシートの生成。

## [gulp-css-spriter-dookay](https://www.npmjs.com/package/gulp-css-spriter-dookay/)
Gulp-css-spriter-dookay、スプライトマップ処理プラグイン。
gulp-css-spriterプラグインに基づいて、画像をマージする必要があるかどうかをフィルタリングするために新しい設定項目matchRegが追加されました。

## [gulp-css-spriter-filter](https://www.npmjs.com/package/gulp-css-spriter-filter/)
gulp-css-spriterからフィルタを追加して、結合したい画像を除外できるようにします。

## [gulp-css-spriter-param](https://www.npmjs.com/package/gulp-css-spriter-param/)
gulp-css-spriterに基づいて変更され、スプライトを処理するために特定のパラメータ（？__ sprite）を追加します。

## [gulp-css-spriter-xx](https://www.npmjs.com/package/gulp-css-spriter-xx/)
gulp-css-spriterはgulpプラグインで、パイプインしたCSSを調べて背景画像をすべて集めます。 次にスプライトシートを作成し、CSSの参照を更新します。

## [gulp-css-spriterm](https://www.npmjs.com/package/gulp-css-spriterm/)
gulp-css-spritermは、gulpプラグインで、パイプインしたCSSを調べて背景画像をすべて集めます。 次にスプライトシートを作成し、CSSの参照を更新します。

## [gulp-dart-sass](https://www.npmjs.com/package/gulp-dart-sass/)
Dart Sassコンパイラを使用したGulp用のSassプラグイン。

## [gulp-happiness-scss](https://www.npmjs.com/package/gulp-happiness-scss/)
happiness-scssのためのGulpプラグイン。

## [gulp-iconfont-sass](https://www.npmjs.com/package/gulp-iconfont-sass/)
Gulpを使ってフォントからCSSを作成します。

## [gulp-js-sass](https://www.npmjs.com/package/gulp-js-sass/)
完全なnodejs dockerコンテナにデプロイするためにnode-sass / pythonなしでscssをコンパイルするために使用されるgulpモジュール。

## [gulp-polymer-sass](https://www.npmjs.com/package/gulp-polymer-sass/)
Polymer要素内に含まれているSCSSコードをコンパイルします。

## [gulp-sass](https://www.npmjs.com/package/gulp-sass/)
Gulp用のSassプラグイン。

## [gulp-sass-cdn](https://www.npmjs.com/package/gulp-sass-cdn/)
gulp-sass cdnは、gulp-sass npmパッケージ用の高速でグローバルなコンテンツ配信ネットワーク（cdn）です。

## [gulp-sass-export](https://www.npmjs.com/package/gulp-sass-export/)
sass-export用のgulpプラグイン

## [gulp-sass-image](https://www.npmjs.com/package/gulp-sass-image/)
node-sass環境にコンパスのような画像機能を提供するためのgulpプラグイン。

## [gulp-sass-inheritance](https://www.npmjs.com/package/gulp-sass-inheritance/)
変更されたsass / scssファイルとそのすべての依存関係のみを再構築します。

## [gulp-sass-inheritance-plus](https://www.npmjs.com/package/gulp-sass-inheritance-plus/)
sass / scssファイルを、それらのファイルを拡張またはインクルードした他のファイルと一緒に再構築する。

## [gulp-sass-inject](https://www.npmjs.com/package/gulp-sass-inject/)
パイプラインにsass変数を注入するためのGulp拡張。

## [gulp-sass-lint](https://www.npmjs.com/package/gulp-sass-lint/)
Sass Lint用のGulpプラグイン。

## [gulp-sass-monster](https://www.npmjs.com/package/gulp-sass-monster/)
Gulp plugin for node-sass with steroids. The project is a revised version of gulp-sass and updated gulp-sass-extended
ステロイド(?)を使ったnode-sass用のGulpプラグイン。
このプロジェクトはgulp-sassの改訂版とgulp-sass-extendedの更新版です。

## [gulp-sass-partials-imported](https://www.npmjs.com/package/gulp-sass-partials-imported/)
scssパーシャルファイルを処理し、それらをインポートするファイルをパイプに追加します。

## [gulp-sass-unicode](https://www.npmjs.com/package/gulp-sass-unicode/)
sassコンパイル後に 'content' Unicodeを置き換える。

## [gulp-scss-dom](https://www.npmjs.com/package/gulp-scss-dom/)
HTML要素でのSCSS機能の使用

## [gulp-spriter-inline](https://www.npmjs.com/package/gulp-spriter-inline/)
`gulp-spriter-inline`はパイプインするCSSを調べて、URLに '？__ spriter'が含まれている背景画像をすべて集めます。 次にスプライトシートを作成し、CSSの参照を更新します。

## [gulp-svg-sprite](https://www.npmjs.com/package/gulp-svg-sprite/)
SVGスプライトとスタックが豊富 -  svg-spriteをラップしてSVGファイルの束を読み込んで最適化し、さまざまな種類のSVGスプライトとCSSリソースを作成するGulpプラグイン。

## [gulp-watch-sass](https://www.npmjs.com/package/gulp-watch-sass/)
SASSファイルを監視し、@ import-ingファイルをストリームに追加します。

## [lip-ret-xur](https://www.npmjs.com/package/lip-ret-xur/)
lip-ret-xurは、スクリプトを整理し、サーバーのリソース使用量を最小限に抑え、サーバー上のデータを取得し、端末に目覚まし時計を提供するツールです。

## [starcor-gulp-css-spriter](https://www.npmjs.com/package/starcor-gulp-css-spriter/)
gulpプラグインのstarcor-gulp-css-spriterは、パイプインしたCSSを調べて、背景画像をすべて集めます。 次にスプライトシートを作成し、CSSの参照を更新します。