いまさらですが、SassとCompassの環境を導入しました
以前から使いたいなとは思っていたのですが、弊社の体制や運用面でのネックがあったりして見送っていました
ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました
前置きはさておき、今回は環境構築についてです
私の作業環境がときにWindowsだったりMacだったりと『アホか!』な感じなので、両方の方法について書いてます
なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです…
Rubyのインストール
Macは最初から入っているようですが、Windowsはインストールしなければいけないようです
Windowsユーザは、下記URLからダウンロードしてください
次に、念のためRubyがインストールされているかと、バージョンを確認しましょう
■Windows
『コマンドプロント』を起動
※「スタート」→「すべてのプログラム」→「アクセサリ」→「コマンドプロンプト」 などで開けま
下記を実行
ruby -v
インストールしたバージョンが表示されたらOKです
ruby 2.0.0p0
■Mac
『ターミナル』を起動
下記を実行
sudo ruby -v
こちらもインストールされているバージョンが出るかと思います
Compassのインストール
『コマンドプロント ore ターミナル』で下記を実行します
・RubyGemを最新にアップデート
gem update --system
・Sassのインストール
gem install sass
・Compassのインストール
gem install compass
これで、Compassを使えるようになったはずです
Compassを使う
流れとしては、
1.『コマンドプロント』などでCompassを使いたい階層に移動
2.config.rb というCompassの設定ファイルを作る
3.監視を開始する
という感じです。
※黒い画面を使わない人なので、この辺りが個人的に一番はまったところです…
■Windows、Mac
『コマンドプロント or ターミナル』を開き、監視したい階層に移動する
cd
※cdのあと半角スペース入ります
と入力してから、Compassを使いたいフォルダを『コマンドプロント or ターミナル』にドラッグ&ドロップしてください
自動でcd の後にフォルダのパスが入力されたと思うので、Enterを押せば設定完了です
続いて、下記を実行すれば設定ファイルやらsassデータなどが自動で作成されます
compass create
次のようなデータが作成されているはずです
config.rb sass └ ie.scss └ print.scss └ screen.scss stylesheets └ ie.css └ print.css └ screen.css
最後に次のコマンドを実行すれば監視がはじまります
compass watch
これで、scssファイルを編集して保存すれば自動的に、stylesheets下のcssファイルが上書きされていきます(ディレクトリがデフォルトの場合)
Compassを停止するときは、『コマンドプロント or ターミナル』で Ctrl + c を押してください
※windowsの場合は、さらに “終了しますか (Y/N)?”と続くので、Yを入力してエンターを押してください
使い始めが面倒なので、簡単に監視を開始させる
これで基本的に使えるようになったのですが、もっと簡単に使いたいので、「バッチファイル」や「シェルスクリプト」を作るとラクです
まずは、「config.rb」や「scss」ファイルなどを事前に用意しておきます
これらのファイルは使いまわすことができるので、一度作ったものをテンプレートとしてもっておけば便利です
テンプレート化する際に、「config.rb」の設定を各自のルールにあわせてみてください
基本的な設定項目は次のようになるので、ファイルの格納場所やcssの出力形式など設定しましょう
http_path = "/" //サイトのパス css_dir = "common/css" //CSSを書きだす場所 sass_dir = "common/scss" //SCSSの保存場所 images_dir = "common/images" //画像ディレクトリ javascripts_dir = "common/js" //Javascriptの場所 output_style = :expanded //CSSの書き出し形式設定。圧縮させたりなどできます line_comments = false //CSS に SCSS の行番号を出力するかどうかの設定
■Windows
テキストエディタなどで下記を記述ファイルを“compass_start.bat”などの名前をつけて「config.rb」と同じディレクトリにおいてください
compass watch
実行すれば、コマンドプロンプトが開始され監視がはじまります
■Mac
テキストエディタなどで下記を記述ファイルを“compass_start.command”などの名前をつけて「config.rb」と同じディレクトリにおいてください
#!/bin/bash
htdocs=$(dirname $0)
cd $htdocs
compass watch
実行すれば、ターミナルが開始され監視がはじまります
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
のファイル内を以下のように修正してください
<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" >
ついでに、lessを追加してもいいかもしれないですね
これで、コードヒントが使えようになっていると思います
黒い画面はイヤな場合
わざわざターミナルなどを使わなくてもKoalaやScoutなどのアプリなどを使えばいいみたいです
今回はコマンドになれるいい機会でしたので、王道で環境構築しました
黒い画面に抵抗がある、自信がない人などはこちらのアプリを検討してみてください
おわりに
長々となりましたので今回は具体的なsassの使い方については省略します
社内連絡として、文頭でふれた運用については基本的にはcss優先でいく方針です
sass使わない人がメンバーに加わる場合は、CSSメタ言語を使わない、途中からcssで進めるように変更します、という感じなのでご安心を
なお、Sass,Compass導入部分については下記ページを参考にさせていただきました
Compassを使ってSassのCSS出力を手軽にしよう
Sass + Compass の基本導入と設定ファイル config.rb について
WindowsにCompassをインストールしてSASS/SCSS環境を構築する