SassとCompassの導入方法(Windows、Mac)
いまさらですが、SassとCompassの環境を導入しました
以前から使いたいなとは思っていたのですが、体制や運用面でのネックがあったりして見送っていました
ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました
前置きはさておき、今回は環境構築についてです
私の作業環境がときにWindowsだったりMacだったりと『アホか!』な感じなので、両方の方法について書いてます
なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです…
Rubyのインストール
Macは最初から入っているようですが、Windowsはインストールしなければいけないようです
Windowsユーザは、下記URLからダウンロードしてください
次に、念のためRubyがインストールされているかと、バージョンを確認しましょう
■Windows
『コマンドプロント』を起動
※「スタート」→「すべてのプログラム」→「アクセサリ」→「コマンドプロンプト」 などで開けま
下記を実行
|
|
インストールしたバージョンが表示されたらOKです
|
|
■Mac
『ターミナル』を起動
下記を実行
|
|
こちらもインストールされているバージョンが出るかと思います
Compassのインストール
『コマンドプロント ore ターミナル』で下記を実行します
・RubyGemを最新にアップデート
|
|
・Sassのインストール
|
|
・Compassのインストール
|
|
これで、Compassを使えるようになったはずです
Compassを使う
流れとしては、
1.『コマンドプロント』などでCompassを使いたい階層に移動
2.config.rb というCompassの設定ファイルを作る
3.監視を開始する
という感じです。
※黒い画面を使わない人なので、この辺りが個人的に一番はまったところです…
■Windows、Mac
『コマンドプロント or ターミナル』を開き、監視したい階層に移動する
|
|
※cdのあと半角スペース入ります
と入力してから、Compassを使いたいフォルダを『コマンドプロント or ターミナル』にドラッグ&ドロップしてください
自動でcd の後にフォルダのパスが入力されたと思うので、Enterを押せば設定完了です
続いて、下記を実行すれば設定ファイルやらsassデータなどが自動で作成されます
|
|
次のようなデータが作成されているはずです
|
|
最後に次のコマンドを実行すれば監視がはじまります
|
|
これで、scssファイルを編集して保存すれば自動的に、stylesheets下のcssファイルが上書きされていきます(ディレクトリがデフォルトの場合)
Compassを停止するときは、『コマンドプロント or ターミナル』で Ctrl + c を押してください
※windowsの場合は、さらに “終了しますか (Y/N)?”と続くので、Yを入力してエンターを押してください
使い始めが面倒なので、簡単に監視を開始させる
これで基本的に使えるようになったのですが、もっと簡単に使いたいので、「バッチファイル」や「シェルスクリプト」を作るとラクです
まずは、「config.rb」や「scss」ファイルなどを事前に用意しておきます
これらのファイルは使いまわすことができるので、一度作ったものをテンプレートとしてもっておけば便利です
テンプレート化する際に、「config.rb」の設定を各自のルールにあわせてみてください
基本的な設定項目は次のようになるので、ファイルの格納場所やcssの出力形式など設定しましょう
|
|
■Windows
テキストエディタなどで下記を記述ファイルを“compass_start.bat”などの名前をつけて「config.rb」と同じディレクトリにおいてください
|
|
実行すれば、コマンドプロンプトが開始され監視がはじまります
■Mac
テキストエディタなどで下記を記述ファイルを“compass_start.command”などの名前をつけて「config.rb」と同じディレクトリにおいてください
|
|
実行すれば、ターミナルが開始され監視がはじまります
Dreamweaverでコードヒントを使えるようにする
※MacではDreamweaverを使っていないのでWindowsのみになります。ご了承ください
参考:【sass,scss】DreamweaverCS4でコードヒントを使う
【CS5以降】
c:\ユーザー名/AppData/Roaming/Adobe/Dreamweaver cs5/ja_JP/Configuration/DocumentTypes/MMDocumentTypes.xml
【CS4】
c:\Program Files/Adobe/Adobe Dreamweaver CS4/configuration/DocumentTypes/MMDocumentTypes.xml
のファイル内を以下のように修正してください
|
|
↓
|
|
ついでに、lessを追加してもいいかもしれないですね
これで、コードヒントが使えようになっていると思います
黒い画面はイヤな場合
わざわざターミナルなどを使わなくてもKoalaやScoutなどのアプリなどを使えばいいみたいです
今回はコマンドになれるいい機会でしたので、王道で環境構築しました
黒い画面に抵抗がある、自信がない人などはこちらのアプリを検討してみてください
おわりに
長々となりましたので今回は具体的なsassの使い方については省略します
なお、Sass,Compass導入部分については下記ページを参考にさせていただきました
Compassを使ってSassのCSS出力を手軽にしよう
Sass + Compass の基本導入と設定ファイル config.rb について
WindowsにCompassをインストールしてSASS/SCSS環境を構築する