delalunaofficedaysのブログ

WORDPRESSとEC CUBEくらいしか触っていないWEBデザイナーの日記とかメモ。

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

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

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

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

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

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

2.Sassのインストール

ここからはコマンドでインストールになります。 Windowsキー → cmdでコマンドプロンプトを実行 [code]gem install sass[/code] これを入力するだけでなんとインストール完了。 ruby3 簡単!

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

http://koala-app.com/ ruby4

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

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

コマンドプロンプトから [code]gem install compass[/code] でインストール完了。 ruby6

5.DreamWeaverCS6で使えるように

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

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

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

僕は自信が無いのでバックアップ目的でコピーをとっておきます。 ruby8 取ったコピーは他のところへ移しておかないと起動時に毎回エラーが出ますのでどっかに保存しておいて下さい。

[code] <documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" > [/code] ↓ [code] <documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" > [/code]

2箇所変更します。

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

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 [/code]

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

[code] Compass create [/code]

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

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