CompassはSassを利用したCSSフレームワークです。導入はちょっと面倒ですが、うまく導入できるとCSSがすごく楽に書けるようになります。
Compassでできることは、ベンダープレフィックスなどの複雑なCSSを簡単に記述できたり、画像のwidthやheightを取得してくれたり、スプライト画像を作成してくれたりもします。
Compassのインストール〜Mac OS X El Capitan編
Compassのインストールはやっかいです。PCの状況で色々と設定が必要になります。
OSのバージョンや色々な環境でエラーが出た際はそのエラー内容を検索するなどで自分で解決するより他になさそうです。
今回はMac El Capitanでのインストール方法です。参考になれば幸いです。
SassはRubyで書かれていますので、Rubyの仕組みを使います。RubyにはGemという便利なライブラリ追加機能が用意されています。（ターミナルを使います）
このGemを使ってCompassも導入すれば簡単な話なのですが、Macの方でセキュリティ関連の対策が厳しくなっており素直にGemが使えない状態になっています。
そこでまずGem自体のバージョンをアップデートしまておきます。(必須ではありません）「sudo」は一時的にrootになるコマンドです。これを使うことで全ての管理権限者になれます。ということで当然Macのパスワードを聞かれますのでパスワードを入力します。（Password:の後に鍵のマークが出てきますのでそこにパスワードを入力）
参考：gem update –system したら gem update bundler もね！
sudo gem update --system
さて、次はCompassのインストールをGemで行えばOKのはずがエラーになります。
この辺の対策は次のページがわかりやすいです。大体このとおりになりますのでまずは一読してみてください。
参考：【Mac】SassとCompassをインストール！エラー克服版！
結論としてこの方の記事はEl Capitanの前に書かれていますので、El Capitanの場合はこのとおりにやってもうまくいきません。もうひとひねり必要です。
けれども途中まではこの記事どおりでOkですからそのまま記事と同様のことを行います。ライセンス同意のところで「agree」と入力しますが、ついつい、スペースキーを押しすぎてスルーしてしまいます。最後に「agree」と入力するときは慎重に行いましょう。
同記事ではその後「sudo gem install compass」でうまくいくとなっていますが、El Capitanではうまくいきません。
次のコマンドでcompassを導入します。
sudo gem install -n /usr/local/bin compass
Command Line Developer Toolsの導入もうひとつの方法
Command Line Developer Toolsの導入にはもっと簡単な方法があります。 Xcode バージョン 6.1 以降では、Xcode のインストール中に Xcode コマンド ライン ツールが自動的にインストールされるようになっているようです。
Xcodeはすでに導入しており、何かのタイミングでアップデートしたがXcodeは開かないままになっている場合は一度Xcodeを開いてみると色々とインストールが始まる場合もあります。
Xcodeのインストールがまだの場合は、App StoreからXcodeをインストールします。
Mac 上で Xcode を起動してメニューの「Preferences」を選択します。
「Locations」ウインドウから「Command Line Tools」にバージョンが示されていたら、Command Line Developer Toolsは導入済みです。
もし、Command Line Developer Toolsがインストールされてないなら、「Mac での Xcode コマンド ライン ツールのインストール」を参考にしてインストールしてください。
Command Line Developer Toolsの導入が済めば次のとおりcompassを導入します。
sudo gem install -n /usr/local/bin compass
次のコマンドでバージョンを確認してバージョンが確認できれば成功です。
compass -v
プロジェクト作成
compassを使うフォルダを作成します。場所はどこでも良いです。
次にターミナルの「cd」でカレントディレクトリを作成したフォルダに移動します。
次の例はユーザーの中に「compass」フォルダを作成してcdで移動するコマンドです。
cd /Users/tahara/compass
新規プロジェクトを作成します。コマンドを入力します。「compass create フォルダ名」と指定すると指定したフォルダ内にsassファイルやcssファイルができます。
compass create
次にKoalaに出来上がったフォルダを登録して、koalaのオプションのcompass Modeにチェックを入れて準備完了です。
あとはCompassを使って便利にCSSを書いていくだけです。
Compassの使い方
SassでCompassを使うにはモジュールをimportする必要があります。
Compassのモジュールは、「css3」、「Typography」、「Utilities」、「layout」、「Reset」の５つに分類されており、必要なモジュールを@importでインポートします。
Sassの@importでインポート記述例
[sass]
@import “compass/css3”;
@import “compass/typography”;
@import “compass/utilities”;
@import “compass/reset”;
@import “compass/layout”;
[/sass]
角丸の記述例
[sass]
h2{
@include border-radius(10px);
}
[/sass]
cssの展開後
h2 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
コメントを投稿するにはログインしてください。