セブではたらく(インターン)
セブではたらく(インターン)
2013.10.16

これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)

せいと

Step4. GUIソフト「Koala」をダウンロードしよう

sass_koaka_web
続いてGUIソフトをインストールします。なんでこんなのが必要かというと、Sassで書いたものをCSSに手軽に変換(コンパイル)する必要があるからです。

ブラウザはCSSは理解してくれますが、Sassで命令してもわかってくれません。アメリカ人に日本語で話しかけているようなもんなのです。そこで、SassをCSSに変換する必要があります。ただ、普通にやろうとすると、先ほどのコマンドプロンプトやらターミナルやらを使う必要があり、なんか難しそうだし面倒くさくね?ってことで、これを簡単にしてくれるアプリケーションを使います。

今回は”Koala”というフリーのアプリを使って説明していきます。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 Documents
CSS:Style Sheets

↓

CSS,SCSS:Style Sheets