WindowsのDreamWeaverCS6環境にSass/Compass環境を整える

2016年1月30日

Sassの環境を整えようと前々から思っていたのだがなんとなく面倒だったので後回しにしていた。 どうやらDREAMWEAVERにも対応しているようなので早速導入してみる。

1.まずはRubyをインストールするところから

http://rubyinstaller.org/ こちらからダウンロード

自分の環境は64BitOSなのでx64を選びます。

そして「Rubyの実行ファイルへ環境PATHを設定する」をチェックしておかないと面倒なのでチェックしておきます。

2.Sassのインストール

ここからはコマンドでインストールになります。 Windowsキー → cmdでコマンドプロンプトを実行

gem install sass

これを入力するだけでなんとインストール完了。

簡単！

3.Koalaを入れます。繰り返します。Koalaを入れます。

http://koala-app.com/

あらおしゃれじゃないですか。

4.Compassをインストールしておく

コマンドプロンプトから

gem install compass

でインストール完了。

5.DreamWeaverCS6で使えるように

別にDreamWeaverCS6で使える必要はないのかもしれないけどやっぱり買ったからには使えるようにしておきたい。 「編集 → 環境設定 → ファイルタイプ/エディター → コードビューで開く」で.scssを追加する

コードヒントが出るようにする。（ここらへん危険ですので編集に自信ニキのみ行って下さい）

C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\DocumentTypes 通常ココらへんにMMDocumentTypes.xmlがあるのでサクラエディタ等で開きます。

僕は自信が無いのでバックアップ目的でコピーをとっておきます。

取ったコピーは他のところへ移しておかないと起動時に毎回エラーが出ますのでどっかに保存しておいて下さい。

↓

2箇所変更します。

KoalaからCompassの設定ファイルを作ります。

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
line_comments = true

色々試した結果、設定はこれがお気に入りでした。 また、Compassの初期設定として

Compass create

で設定ファイルたちがだーっとできます。

ひとまずこれで完成です。