今すぐ使える!CSSフレームワークのCompassとは【初心者向け】

今回はCSSを効率的に書くためのフレームワークである、Compassについて解説しています。初心者の方でも分かるように実際にソースコードを書きながら説明しています。効率良いCSSコーディングができるので使うことをおすすめします。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

CSSを効率的に書くためのフレームワークである、Compassについて解説しています。

Compassを使用するためにはSassの知識開発環境が必要となりますので、そちらを準備していない人は、まずそちらから理解するようにしましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。

 

20163020-2

 

今回はCompassの使い方について見てみよう。

 

20160620

 

田島メンター!!Compassというのは何ですか〜?

 

20163020-2

 

Sassを使用したCSSのフレームワークだよ。まずはインストールして基本的な動作をやってみようか。

 

20160620

 

はい!お願いします!

 

Compassを導入してみる

Compassを導入するためには、冒頭で述べたSassの環境の他にrubyの環境が必要となりますのでそれぞれコマンドラインで確認してみましょう。

$ruby -v
ruby 2.3.0p0
$sass -v
Sass 3.4.22 (Selective Steve)

上のように表示されれば開発環境は整っていますのでCompassの導入を進めていきましょう。若干のバージョン差はあっても構わないです。
それでは以下のようにターミナルに打ち込んでいきましょう。

$sudo gem install compass
Password:
Fetching: compass-import-once-1.0.5.gem (100%)
Successfully installed compass-import-once-1.0.5
............#省略
Done installing documentation for compass-import-once, 
compass-core, chunky_png, compass after 5 seconds
4 gems installed

これでCompassの導入は終了です。

 

20163020-2

 

RubyとSass、それぞれがインストールされた状態で上のコマンドを入力しよう。

 

20160620

 

ターミナルの場合はパスワードも入力するんでしたね。

 

20163020-2

 

インストールが完了したら、実際にファイルを作成してコンパイルする手順までやってみるよ。

 

Compassを使用してみる

それではCompassを実際に使用してみましょう。コマンドラインで、

$compass create

とに入力してください。
するとディレクトリ内でCompassを使用するためのフォルダが作成されます。
その中のsassフォルダ内にsample.scssを作成して編集していきましょう。

@import "compass";

#sample{
  @include inline-block;
}

その後ターミナルで

$compass watch

とするとsample.cssが作成されます。

#sample {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

このようにベンダーフィックスを記入する際でも簡単に記述することができます。

 

compassは少し上級者向けの機能が多く、spriteを簡単に扱ったり、レイアウトの細かい部分を例のように一行で書けたりします。

普通のCSSを書く分にはSCSSで十分対応できますが、もっとサイトデザインにこだわりたいという方はこちらも扱ってみる事をお勧めします。

 

20163020-2

 

これがCompassを使う基本の流れだね。CSSファイルはstylesheetsフォルダに生成されるよ。

 

20160620

 

このcompass watchというコマンドは何をしているんですか?

 

20163020-2

 

これはsassフォルダ内で保存されたSassファイルを自動でコンパイルしてくれるものなんだ。終了するときはCtrl+cを入力しよう。

 

20160620

 

なるほど、分かりました。ありがとうございます!

 

 

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。