ajike switch

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×

初心者にもやさしいSassとCompassの導入方法(Windows、Mac両対応)

いまさらですが、SassとCompassの環境を導入しました
以前から使いたいなとは思っていたのですが、弊社の体制や運用面でのネックがあったりして見送っていました
ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました

前置きはさておき、今回は環境構築についてです
私の作業環境がときにWindowsだったりMacだったりと『アホか!』な感じなので、両方の方法について書いてます
なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです…

Rubyのインストール

Macは最初から入っているようですが、Windowsはインストールしなければいけないようです
Windowsユーザは、下記URLからダウンロードしてください

RubyInstaller

次に、念のため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を追加してもいいかもしれないですね
これで、コードヒントが使えようになっていると思います

黒い画面はイヤな場合

わざわざターミナルなどを使わなくてもKoalaScoutなどのアプリなどを使えばいいみたいです
今回はコマンドになれるいい機会でしたので、王道で環境構築しました
黒い画面に抵抗がある、自信がない人などはこちらのアプリを検討してみてください

おわりに

長々となりましたので今回は具体的なsassの使い方については省略します

社内連絡として、文頭でふれた運用については基本的にはcss優先でいく方針です
sass使わない人がメンバーに加わる場合は、CSSメタ言語を使わない、途中からcssで進めるように変更します、という感じなのでご安心を

なお、Sass,Compass導入部分については下記ページを参考にさせていただきました
Compassを使ってSassのCSS出力を手軽にしよう
Sass + Compass の基本導入と設定ファイル config.rb について
WindowsにCompassをインストールしてSASS/SCSS環境を構築する

servi