2017年3月11日（土）にベルサール神田で開催したCSS Nite LP51「Reboot Dreamweaver」のフォローアップとして、久保 知己さん（まぼろし）の『DreamweaverでSassを使うための勘所』セッションのスライドなどを公開します。
メッセージと補足
Sassセッションを担当しました、株式会社まぼろしの久保です。
長丁場にもかかわらず、ありがとうございました。
Sassをはじめて知った方には、難しい内容だったかもしれませんが、最初にSassはどういうものか、お話させていただきました。
CSSメタ言語は、CSSのセレクタを入れ子にしたり、変数を使って色を管理したり、プログラムのようなことがCSSでも可能になります。
そしてCSSプリプロセッサーは、CSSメタ言語からCSSにコンパイル（変換・出力）が行うためのプログラムであり、この役割をDreamweaver CC 2017でも行えるようになりました。
CSSプリプロセッサーの環境を構築するには、マウスを使わずに文字だけで操作するCLI（コマンドラインインターフェース）を使って構築するのが主流で、WindowsやMacのOSによって構築方法が異なります。
しかしDreamweaver CC 2017では、Dreamweaverをインストールするだけで、OSによって特殊な操作をすることなく、CSSプリプロセッサーの環境が構築されます。
そのため、これから触ってみる方や以前に環境構築で諦めた方も、簡単に導入できると思います。
ただ、現在のDreamweaverとCSSメタ言語の連携がうまくいっていない箇所も見られると思います。特に不満に思う部分や欲しい機能などは、Dreamweaverのユーザーボイスへ投稿するといいでしょう。ユーザーボイスで「Sass」を検索すると、すでにいくつも要望が上がっています。投稿するのは「ちょっと...」と思う方は、Voteボタンを押すだけでも要望に反映されます。Dreamweaverをもっと良くしていきましょう。
ありがとうございました。
セッション内で紹介したリンク
アンケート等でいただいた質問への回答
Q. Sassがどういうものか知っていましたが、ハードルは高そうですね。
Q. 書き方を新たに覚えられるか少し不安
スライドのコードは、プログラムのように書かれていますが、普通のCSSを書いても問題ありません。
一部、セレクタを入れ子にしたり、変数を使ってみることから始めるといいと思います。
Q. 階層を管理している環境は反映できますか？
はい。フォルダーが階層になっていても反映されます。
Q. 結局はDwではSassって使わないほうがいいのですかね。
Dreamweaverは、CSSと連携する機能を使わない方であれば、Sassを利用しても問題ないと思います。
Sassライブラリを使いたい場合も、公式からダウンロードできますし、Sassそのものの機能は、すべて動作するの問題ありません。
Q. 実のところDwでSassを使った作業をしていますか？
私の場合、Sassの他にPostCSSなども連携して使っています。
そのためSassだけで作業が完結しないので、現在CSS周りは別のものを使っています。
Q. 最近何かお気に入りのSassライブラリはありますか？
使っているわけではないのですが、Bourbon v5ベータ版が気に入っています。
私は欲しいMixinsや関数などを自分で作ってしまうのですが、Bourbon v5はMixinsの作り方やどういったMixinsがあれば便利になりそうか、参考にさせてもらています。
Q. 便利ですが、今後も重要になってくるのでしょうか？
Sassが誕生して、今年で10周年です。移り変わりの激しいWebの技術で、10年以上も使われている技術は多くありません。
現在は、Sassの他にPostCSSが新たに登場しています。完全にPostCSSに乗り換える方もいっらしゃいます。
しかしPostCSSをSassなどに置き換えるには、機能と文法、また開発者の思想によって、なり変わることは難しいと感じています。
私もSassとPostCSSを併用して使っていますが、現状Sassを切り捨てるのは考えられません。
CSSのあり方が大きく変わらない限り、この先もSassは重要であると思っています。
Q. ベンダープレフィックスは、現状どうするのが効率よいですか？
ベンダープレフィックスは、PostCSSのプラグインの1つであるAutoprefixerを利用するのが一番いいでしょう。Autoprefixerは、ベンダープレフィックスを記述せずに、そのままCSS3を書くだけで、指定したブラウザの対応バージョンに合わせて、ベンダープレフィックスを付与してくれるツールです。CompassやBourbon v4のようにベンダープレフィックスのためにMixinsを呼び出す必要がありません。
ただしDreamweaver CC 2017では、Autoprefixerに対応していないのすが、私の次のセッションだったAdobe 轟さんの「Dreamweaverに追加予定の機能と開発チームへの機能要望の出し方」で、Autoprefixer入ることが検討されているようなので、今後の機能追加に期待ですね。
Q. CSSの速い書き方を使ったことがなかったので勉強しようと思いました。
CSSの速い書き方は「Emmet」ですね。
EmmetのCSSの書き方は、コードヒントで入力するよりも2倍のスピードで入力することができます。なぜならコードヒントは、プロパティと値を別々に入力するのに対し、Emmetはプロパティと値を同時に展開するからです。
Emmetについては、私が過去にAdobeの公式ブログで連載していた記事があるので、こちらをご覧ください。
Q. Sassファイルと書き出されたCSSファイルは分けた方がいいでしょうか？
Sassファイルが多くないのであれば、CSSファイルを分ける必要はありません。
もしCSSのパーツごとにSassファイルを区切っているのであれば、別ファイルの方が管理しやすいと思います。
Q. マイナーバージョンアップでもSassのバージョンは上がるのでしょうか？
またDw上でバージョンを確認するには？
私がDreamweaverのプレリリースから確認している限り、Sassの「ライブラリ」はバージョンが上がっています。
ただSassそのもののバージョンは、Sassの最新が適用されていないのでバージョンは上がっていませんが、将来的に上がる可能性もあると思います。
またDreamweaver上でのライブラリのバージョン確認は、[サイト設定]->[CSS プリプロセッサー]->[ライブラリ名]のインクルードパスに、ライブラリのディレクトリが書かれているので、ライブラリの本体ファイルから確認します。
Sassそのもののバージョンの正しい方法は、私にもわかりません。私がやっているのは、Sassのバグからバージョンを推測しています。
Q. すでにBoostrap以外のクラスがたくさん入ったCSSを編集できるか？
SassはCSSを出力するための元ファイルであり、Bootstrap Sassを使ったとしても、すでにたくさんのクラスがCSSに入っていれば編集できません。
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
