弊社のcssもとうとうscss化を行い（え？いまさら？ﾌﾟﾌﾟｯ）、自動化も進みかなり効率よく作業ができるようになりました。

##導入準備

Gulpのインストール
ガイドラインの作成
sass-lintの設定
.csscomb.jsonの設定

Gulpのインストール系は、得意な方にやってもらって私はガイドラインやcss回りの設定を担当しました。

新規参入者用にコーディングのガイドラインをweb化していたので、そちらにSass、Gulpの導入マニュアルやガイドラインを追加。

##ガイドラインの作成

主に以下の項目でまとめました

ファイル構成
scss配下について
sass-lintについて
Sassコーディングの注意点

###1.ファイル構成
リポジトリ配下を説明。コンパイルされるcssと実際に作業するscss、HTMLを構成するモジュールのパーツ、画像を管理するフォルダ、コンパイルされる画像の場所、などをツリーにして表しました。

###2.scss配下について
実際に作業するscss内の構成も＠importとモジュール単位でのscss管理、それぞれの関係をツリーにして表しました。

###3.sass-lintについて
https://github.com/sasstools/sass-lint/tree/develop/docs/rules
を参考に翻訳しながら設定＆自分用も兼ねてマニュアルを作成しました。（正直これが一番しんどかった）

###4. Sassコーディングの注意点
コーディング手法、作業の流れについての説明。
せっかくsassにするのだから、細かくモジュールに分けて管理しよう、と思ったものの、カテゴリに対してモジュール数が多く、cssはカテゴリ毎にまとめたかったので＠importでまとめる方法を採用。このあたりはGulpに詳しい方と相談して設計から考えました。

#sass化のメリット・ガイドラインの意図
sassを採用するにあたって、より構造的な考え方ができるので、無駄なcssを省いたり、html構造をより想像しやすくなると個人的には思っています。

インデントを最小限にすることにより、無駄なcssや重複するcssが省ける。
（また別記事にまとめますが）構造的な考え方をすることで文書構造を意識でき、HTMLも想像しやすい。
プロパティやセレクタの順番を指定することで「大きなまとまりから小さなまとまり」になり、意図したものに自然と近づく。
.csscomb.jsonを導入することで、プロパティの順番が自動で並び替えられ、統一されるので非常に楽。
Gulpのプラグインでベンダープレフィックスの自動付与や画像の圧縮、cssのminify化が自動で行えるので効率的。

#.csscomb.json
http://csscomb.com/config
↑で簡単に設定ファイルが作れます。
インデントも自動で行ってくれるし、scssの整形ルールがある程度オリジナルで作成できるので、使い方によっては非常に便利。（combが悪だという噂もありますが、複雑な事をしなければまあまあ使えるかな、と）

最後に、チームでやっていく上でルールの継承や伝達・意思統一がなかなか難しいです。
どうしても多忙になってしまうと、細かな事がなおざりになってしまいます。
説明が下手くそなので「これ見てね！」ってポイッと渡せるガイドラインを充実させていきたいと思います