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

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

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

 

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

 

 

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の導入は終了です。

 

 

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で十分対応できますが、もっとサイトデザインにこだわりたいという方はこちらも扱ってみる事をお勧めします。

 

 

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