Step4. GUIソフト「Koala」をダウンロードしよう
続いてGUIソフトをインストールします。なんでこんなのが必要かというと、Sassで書いたものをCSSに手軽に変換（コンパイル）する必要があるからです。
ブラウザはCSSは理解してくれますが、Sassで命令してもわかってくれません。アメリカ人に日本語で話しかけているようなもんなのです。そこで、SassをCSSに変換する必要があります。ただ、普通にやろうとすると、先ほどのコマンドプロンプトやらターミナルやらを使う必要があり、なんか難しそうだし面倒くさくね？ってことで、これを簡単にしてくれるアプリケーションを使います。
今回は”Koala”というフリーのアプリを使って説明していきます。Koalaはめちゃめちゃ簡単でわかりやすいです！あとアイコンが可愛い（＊´Д`）（一部からはキモいと言われてますが）
↑のページから「”Download”内のリンク → ”Windows” or “Mac” のリンクをクリック」でダウンロードできます。保存先は任意の場所へどうぞ。最新バージョンが好ましいですが、beta版は僕は使っていません。正式リリースされているものがいいかと思います。（2013年10月07日現在だと、v1.4.3）
ついで初期設定もしときましょう。今回は使いませんが、いずれ必要になるであろうcompassというシロモノをここで使えるようにします。左上の歯車のアイコンをクリックし、左側メニューの「Sass → compass」にチェック。また、左側メニューの「General → Language」から日本語モードにもできます。Koalaの詳しい使い方は後述します。
Step5. DreamweaverにSassを対応させる
DWをご使用の方は設定をいじくる必要があります。（DW以外の人は、この章はすっ飛ばしていただいてOKです。）ただし、DWはCCも含めてSassに完全対応していないため、この手順を行う場合は自己責任でお願いします。編集前にバックアップをとるなど、いつでも再インストールできる準備をしておくことをオススメします。
Sassを対応させる3ステップ
1.scssファイルを開けるようにする
Sassのデータは”.scss”という拡張子なのですが、初期状態のDWはscssファイルが何だかわかっていないので、一度頭に叩き込んで教えてやる必要があります。
そのために、以下のことを実行してみてください！
①メニュー → 編集 → 環境設定 → ファイルタイプ/エディターを開く
②右側の項目「コードビューで開く」に拡張子”.scss”を追記
2.コードヒントが出るようにする
初期状態のDWはscssファイルが何だかわかっていないので、そのまま編集してもcssのようにコードヒントを出してくれません。そのために、DW設定ファイルのMMDocumentTypes.xmlを編集します。コードヒントが出ないと不便ですよね。※DWで開くとアカンという噂を聞きました。念のため別のエディタをご使用ください。（僕はDWでいじっちゃいましたが…）
MMDocumentTypes.xmlの場所は、DWがインストールされているフォルダ内の”\configuration\DocumentTypes”にあります。以下の部分を書き換えてください。
<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >
↓
<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" >3.アイコンが真っ白いので変える
1、2の手順により、既にDWでもSassを扱えますが、このままだとscssファイルのアイコンが”不明なファイル扱い”になってしまうので、気になる方は変えましょう。修正するにはDW設定ファイルのExtensions.txtを編集します。
Extensions.txtの場所は、DWがインストールされているフォルダ内の”\configuration”にあります。以下の2箇所を書き換えてください。”CSS,”の後ろに”SCSS”を加えるだけです。
HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,JSON,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,PHP-DIST,PHTML,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER,INFO,INSTALL,THEME,CONFIG,MODULE,PROFILE,ENGINE,SVG:All Documents
↓
HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,JSON,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,SCSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,PHP-DIST,PHTML,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER,INFO,INSTALL,THEME,CONFIG,MODULE,PROFILE,ENGINE,SVG:All DocumentsCSS:Style Sheets
↓
CSS,SCSS:Style SheetsLIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
