対象読者
- CSSの基礎知識がある方
- SassおよびCompassの導入を検討している方
Compasとは
![](http://cz-cdn.shoeisha.jp/static/images/article/7772/7772_01.gif)
![](http://cz-cdn.shoeisha.jp/static/images/article/7772/7772_02.gif)
Compassのメリット
CSSスプライトが簡単に作成できる
独自のmixinが利用できる
グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。独自の関数が利用できる
画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。 mixinや関数はCompassの公式リファレンスで紹介されています。ここでは記載できないほどのmixinや関数がありますので、一度見てみると面白いかと思います。 上記に加え、第1回目に記載したこちらのSassのメリットももちろん享受できます。 ● 読みやすい ● 変数や繰り返し処理が使える ● 成果物の品質を統一できる ● 高速化につながる ● //で1行のコメントが書ける ● 関数が作れるCompassのインストール
コマンドラインからCompassのインストールを実行します。今回はSassインストールを前提に話をしていきます。もしSassのインストールがまだできていない人は、第1回目の記事を参考にSassをインストールしてみてください。Windows環境
Windows環境でのCompassのインストールを説明します。Compassのインストールはコマンドプロンプトから行います。コマンドプロンプトを起動して﹁gem install compass﹂と入力し、﹁Successfully installed compass﹂と表示されれば成功です。ためしに「compass version」と入力してみてください。インストールされているCompassのバージョンが表示されるはずです。
Mac環境
次に、Mac環境でのCompassのインストールです。Mac環境でも同様にCompassのインストールはコマンドラインから実行します。ターミナルを起動して「sudo gem install compass」と入力します。
その後パスワード入力が促されますので、ご自身のPCのパスワードを入力してください。
パスワード入力後に「Successfully installed compass」と表示されれば成功です。
ためしに「compass version」と入力してみてください。インストールされているCompassのバージョンが表示されるはずです。