Sass(scss)&Compassのインストールと初期設定の方法まとめ

このエントリーをはてなブックマークに追加
Pocket

CSSの新しい境地にたどり着いたSCSSとCompass。すでにこれらをフル活用してWeb制作をされているところも多いと思います。今回はそんなSass(scss)とCompassのインストールの方法と初期設定までをまとめて解説していきたいと思います。

っとその前にSCSSとCompassの使い方をこちらにまとめたので、合わせてご覧下さい。

さくっとインストール

ではさっそくインストールをやってみましょう。sassのインストールにはターミナルを使います。アプリケーション->ユーティリティからターミナルを選択して起動させます。

画面が出てきたら以下のように入力。

sudo gem update --system

scssとcompassのインストール方法
入力できたらEnterで実行します。パスワードの入力を求められるので入力しましょう。このときwebサイトのフォームのように黒い●は出てこないので注意。

パスワードが入力できたら、またEnter。しばらく待っているとずら〜っと長いテキストが出てきてインストール完了です。

scssとcompassのインストール方法-2
ここでインストールしたのはRubyという言語のアップデート。SCSSを使うにはRubyが必要なので最新版にアップデートしておきました。

いよいよSassとCompassをインストール

ではこんどこそSassをインストールします。先ほどアップデートが完了したターミナルをそのまま使います。

次に入力するのはこちら。

sudo gem install sass

同様にしてEnterで実行します。これでsassのインストールは完了。

次はCompassです。

sudo gem install compass

これで完了です。

インストールできたかどうか確認したいときは以下を入力して実行します。

sass -v

compass -v

SCSSとCompassの初期設定の方法

インストールが終わったら初期設定を行います。なぜ初期設定をする必要があるかと言うと、SCSSもCompassもそのままではHTMLに読み込まれないのでコンパイルしてやる必要があるんです。

また、SCSSファイルをコンパイルしたときにどこに書き出すかというのも指定しておく必要があるのです。

とは言ってもこちらでやることはほとんどなく、一発でファイルを用意してくれるので簡単に終わります。ではやってみましょう。

初期設定のためのフォルダを用意

一発で必要なファイルを作ってくれるのですが、その前にどこに作るかを指定します。

ここで再びターミナル登場。cdでフォルダのパスを記述して移動すればOKなんですが、ここではもっと簡単にやる方法を紹介します。

システム環境設定->キーボード->キーボードショートカット->サービスからフォルダに新規ターミナルにチェックを入れます。
sass-compass-install3
初期設定のファイルを入れたいフォルダを右クリックするとターミナルで開けるようになっているので、クリックして開きましょう。

scssファイルを作成

ターミナルが起動したら、先ほどと同じ要領で以下のコードを入力します。

compass create

成功するとずら〜っと長いテキストが出てきます。先ほど指定したフォルダを覗いてみると・・・ご覧の通り一発でファイルを生成できました。
scssとcompassの初期設定
このまま使ってもよいのですが、フォルダ名がやや長いので短く改名したいと思います。

生成されたファイルにconfig.rbというものがあります。これを開くとこんな感じになっているので、フォルダ名を短く変えておきましょう。
sass-compass-install5
ここでは以下のように書き換えました。

  • stylesheets -> css
  • images -> img
  • javascripts -> js

※ここはとくに書き換えなくても問題ありません。

書き換えたらフォルダのほうも同じ名前に変えておきます。imgフォルダがなかったので作成しておきます。

あとsassフォルダやstylesheetsフォルダに生成されたscssやcssファイルは必要なければ削除しても良いようです。ただ、scssの方は何か１つファイルを作っておかないとコードが書けないのでsytle.scssなど適当に作っておきましょう。

SCSS&Compassで書こう

ここまでで準備がととのったので、コードを書いていきます。SCSSファイルにコードを記述していきます。書き方はSass(scss)の簡単な使い方を見て下さい。

Compassも一緒に使う場合はCompassの簡単な使い方で紹介したようにファイルの初めに

@import "compass"

という記述が必要です。

一通り書けたら保存してみます・・・なにも起こりません。

何故かと言うとコンパイルという操作が必要だからです。コンパイルは保存と同時に勝手にやってくれるためいつものCSSを書いてるのと同じ感覚でSCSSを書けます。

方法は、三たびターミナルの登場。先ほどと同じようにフォルダに移動します。その後以下のコードを入力して実行します。

compass watch

この状態でSCSSファイルを保存してみると・・・こんどはcssファイルにSCSSをCSS化したコードが保存されました。

/* SCSS */
@import "compass";


body{
    @include border-radius(4px);
}



/* CSS */
body {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

あとはSCSSで記述して普通に保存するだけで同じようにCSS化されます。コンパイルをストップしたいときは ctrl + c で停止させることができます。ネストや変数、ミックスインやCSSスプライトといった強力な機能を使うことができるのでどんどん活用したいですね！

初期設定のあとは・・・

SCSSをもっと便利に使うためのツールや使いやすいミックスインのスニペットなどをこちらのページで紹介しています。とくにツールを使うとCSSファイルを自動的に圧縮してくれたり、エラーを検出してくれたりするのでとても便利です。

Sass(scss)&Compassの便利ツール・スニペット・Tipsまとめ

今回の記事はいかがでしたか？参考になったよ！という方はぜひコメントやいいね！をお願いします：）