consistent.(CSScombは、CSSのコーディングスタイルフォーマッタです。独自の構成を簡単に記述して、スタイルシートを美しく一貫性のあるものにすることができます。README.mdより抜粋つまりCSSのプロパティを決められたルールで並び替えることができるツールです。現在、CSSはたいてい何かしらのメタ言語で書かれていると思いますが、CSScombはコンパイル後のCSSだけでなくSCSSにも対応1しているので、作業中の並び順を意識しなければならない煩わしさや、ルールを記憶する学習コストから開放されます。3種類のプリセットCSScombにはデフォルトで以下の3つの設定が用意されています。csscombhttps://github.com/csscomb/csscomb.js/blob/master/config/csscomb.jsonyandexhttps://github.com/csscomb/csscomb.js/blob/master/config/yandex.jsonzenhttps://github.com/csscomb/csscomb.js/blob/master/config/zen.jsonとはいえ所属するグループやプロジェクトごとにルールが決められている場合にはプリセットでは対応しきれません。その場合、上記の設定などを参考に独自の.csscomb.jsonを用意する必要があります。上記のプリセットはいずれもプロパティの種類ごとに分別していますが、googleのCSSガイドはアルファベット順になっています。sort-orderの記述がないと動作しない2ようです。下記サービスにて作成される場合は手動で追加する必要がありますのでご注意ください。confighttps://csscomb.herokuapp.com/configこちらは24個の質問に答えるだけで簡単にオリジナルの.csscomb.jsonが作成できる便利なサービスです。VSCodeで使う以下の拡張機能をインストールします。Settings(JSON)」を選択し、settings.jsonを開きます。そこに用意した.csscomb.jsonのパスを追記します。"~/.csscomb.json"}となります。styles」を選択します。.pipe(gulp.dest('./build/css'));}直接、csscombタスクを実行してもいいですが、個人的にはgulpのbuildタスクあたりに含めておくのが、実行忘れ防止になっておすすめです。watchタスクも試してみたのですが、scssファイルの入力途中でcsscombが実行されてしまうと、ネスト化しているときなど、大きく崩れてしまったりして使い勝手が悪かったです。watch時では処理の無限ループ回避のためにgulp-cached4を利用する必要があります。まとめコンパイル後のCSSにはすでにCSScombを活用している方は多いと思いますが、SCSSには適用していない方が意外と多い(※個人的所感です)のではないかと思い、この機会におさらいしてみました。SCSSにも適用することは、学習コストの低減、属人性の解消、作業効率の向上が見込めるので、よいのではないかと思いました。https://qiita.com/s-kato/items/c58af68057d6105dd648Sass、Stylus、LESSは未対応です。詳しくは参考サイト2を参照ください。↩ショートカットキーを割り振るのも便利かと思いますが、個人的には学習コストの低さから、基本的にはコマンドパレットからの操作がよいと思っています。詳しくは参考サイト3を参照ください。requestStockLike7@k__watanabeFollow株式会社アンティー・ファクトリーインターネットビジネスを中心とした企画、設計、デザイン、システム、運用、マーケティング、リサーチ等の総合的なクリエイティブファームです。upLoginユーザーは見つかりませんでした。