##リストじゃないものにもCS…
WindowsのDreamWeaverCS6環境にSass/Compass環境を整える
Sassの環境を整えようと前々から思っていたのだがなんとなく面倒だったので後回しにしていた。
どうやらDREAMWEAVERにも対応しているようなので早速導入してみる。
1.まずはRubyをインストールするところから
http://rubyinstaller.org/
こちらからダウンロード
自分の環境は64BitOSなのでx64を選びます。
![ruby](https://bistro.site/wp-content/uploads/2016/01/ruby-1-300x147.jpg)
そして「Rubyの実行ファイルへ環境PATHを設定する」をチェックしておかないと面倒なのでチェックしておきます。
![ruby2](https://bistro.site/wp-content/uploads/2016/01/ruby2-1-300x233.jpg)
2.Sassのインストール
ここからはコマンドでインストールになります。
Windowsキー → cmdでコマンドプロンプトを実行
gem install sass
これを入力するだけでなんとインストール完了。
![ruby3](https://bistro.site/wp-content/uploads/2016/01/ruby3-1-300x112.jpg)
簡単!
3.Koalaを入れます。繰り返します。Koalaを入れます。
![ruby4](https://bistro.site/wp-content/uploads/2016/01/ruby4-1-300x276.jpg)
あらおしゃれじゃないですか。
![ruby5](https://bistro.site/wp-content/uploads/2016/01/ruby5-1-300x187.jpg)
4.Compassをインストールしておく
コマンドプロンプトから
gem install compass
でインストール完了。
![ruby6](https://bistro.site/wp-content/uploads/2016/01/ruby6-1-291x300.jpg)
5.DreamWeaverCS6で使えるように
別にDreamWeaverCS6で使える必要はないのかもしれないけどやっぱり買ったからには使えるようにしておきたい。
「編集 → 環境設定 → ファイルタイプ/エディター → コードビューで開く」で.scssを追加する
![ruby7](https://bistro.site/wp-content/uploads/2016/01/ruby7-1-300x193.jpg)
コードヒントが出るようにする。(ここらへん危険ですので編集に自信ニキのみ行って下さい)
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\DocumentTypes
通常ココらへんにMMDocumentTypes.xmlがあるのでサクラエディタ等で開きます。
僕は自信が無いのでバックアップ目的でコピーをとっておきます。
![ruby8](https://bistro.site/wp-content/uploads/2016/01/ruby8-1-300x105.jpg)
取ったコピーは他のところへ移しておかないと起動時に毎回エラーが出ますのでどっかに保存しておいて下さい。
↓
2箇所変更します。
KoalaからCompassの設定ファイルを作ります。
![sass1](https://bistro.site/wp-content/uploads/2016/01/sass1-1-300x185.jpg)
# 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
で設定ファイルたちがだーっとできます。
ひとまずこれで完成です。
ディスカッション
コメント一覧
まだ、コメントがありません