- 2014年4月 9日 13:10
- Technology
- Comments: 0
- Edit
どうもどうも、オッキーです。
先月、仕事でオーストリアに3週間ほど行ってきました。仕事漬けで、ほとんど観光する時間はありませんでしたが……。それでも、世界遺産でもある旧市街は美しく、街の時計台から見た景色は素晴らしい想い出になりました。また、別の機会に写真もアップします。
発表資料
さて、本題です。先週金曜日に2月から始めたDISTという新しい勉強会の第2回目、DIST.2「Sass Again」を開催しましたので、その発表資料を公開します。複数人でプロジェクトを進める上での注意点、ソースマップを使ったデバッグ、Sassを使ったフレームワークCompassの概要などをお話ししました。
スライド以外の、デモで使ったファイル一式はDISTのGitHubリポジトリで公開しています。
当日は、22名の方にご参加いただきました。DISTのコンセプト通り、デザイナー、デベロッパー、ディレクターとさまざまな職種の方にお越しいただきました。どうもありがとうございました！
質問と答え
なお、限られた時間の中では、セッション前に募集した質問に答えきれなかったので、この記事で答えておきます。
オススメのビルド（コンパイル）方法は？
私はGruntを使っています。プロジェクトごとに設定ファイルやバージョンを切り分けることができるのと、他のコンパイルが必要な言語（HandlebarsやCoffeeScriptなど）のサポート、他の人とビルド環境を共有しやすい、というのがポイントですね。また、プラグインの組み合わせによって、Sassの保存と同時にコンパイル→完了時にブラウザリロードが自動実行されるようにしています。
コンパイル後のバージョンの管理について
これ、セッション中に触れるつもりだったんですが時間がなくなってしまってすみません。まず前提としては、GitやSubversionなどのVCSを使うことになります。
そして、理想としては、「コンパイル後のファイルは管理しない」です。つまり、SassでいうところのCSSファイルはVCSに入れません。Sass→CSSのワークフローでは、出力スタイルやオプションによってCSSの書式にバラつきが出るので、これが一番スマートになる方法です。私も、1人で完結するプロジェクトでは、このようにSassのみを管理する方法で運用しています。
ただし、現実としては、「Sassを誰もがコンパイルできるわけではない」 ので、CSSファイルもコミットすることになることがほとんどです。このあたりは仕組みで改善できればベストですが、今のところ最適解がない、というのが正直なところではないでしょうか。
Sassとか逆にめんどくさくないの？
私も使い始める前はそう思っていましたｗ 一度使い始めると離れられないので、ぜひお試しください。
既存のプロジェクトにSassを導入するには、どこから始めればよい？
DIST.1でも話しましたが、SCSS記法であればCSSをそのままコピペしても動きます。ですから、今すぐすべてのCSSをコピペしてSassに移行する、というのも手です。書き直す必要はなく、新しく書くところだけSassの機能を使えばよいのです。ただし、既存プロジェクトの規模（CSSの記述量）が大きい場合は、はじめからSassで書き直したほうがスマートになるでしょう。
最近、Sass、Compassを使い始めたのですが、一通りこれをやっておけば大体の機能を理解できるようなチュートリアル（本 or Web）でおすすめのものはありますか？
↓この本がよいかと思います。
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
現状、日本語のSass関連の書籍は3冊出ていますが、本書が一番バランス良く、また分かりやすく書かれています。ただし、執筆当時のバージョンが少し古いので、新しめの機能については解説がない点は注意が必要です。
複数人でSassを用いる際のメリット・デメリット
メリットは、1人／複数人に関わらず、やはりCSSを効率的に書ける点です。デメリットは、チームだとSassの扱いについてレベル差があるので、誰かが使いこなせない機能を使いまくると逆に扱いにくくなる、という点です。すべての機能を使う必要はなく、ネストを使うだけでもだいぶ楽になるので、あらかじめチームで話し合ってどのような運用にするのかを決めておくとよいと思います。
CSSのファイルサイズを考慮した場合、Sassは有効ですか？
単純な圧縮という意味では、出力スタイルでcompactを選べばスペースや改行を削除してくれるので、大変有効です。
セレクタの整理方法があれば教えてください
これはSassというよりも、書き方の問題ですね。詳しくは長くなるので、OOCSS、BEM、SMACCSというキーワードでググってみてください。
BracketsでSassを使いたい
単純なコーディングやコンパイルは、拡張を入れることで実現できますね。クイックエディット（HTML内のセレクタから該当の箇所を表示する機能）は、未対応だと思いますので、対応を待ちましょう。ちなみに私の使っているIntelliJ IDEAでも、Sassにおけるクイックエディットにあたる機能は未対応です。
今後について
懇親会では、オーストリア土産の白ワインもふるまいました。みなさんに気に入っていただけたのですが、うっかり自分の分を確保するのを忘れていたので味は分かりませんｗ
次回のDISTは6月ごろを予定しています。決まり次第、Twitterなどでお知らせしますので、私のアカウント@448jpをフォローしてください！
写真提供：直江憲一（ズカンドットコム）
