SassでCompassを使う

Compassにはベンダープレフィックスを自動で追加してくれたりするミックスインなどが用意されていて、プロジェクトごとにSassの設定を変えたりできます。
Sassをより便利に使うためのCSSフレームワークです。

しかし Autoprefixer によるベンダープレフィックス管理が注目を集め、Ruby Sassよりも高速なC/C++製 LibSass も登場。Compassの利用者は一気に減少。 2016年、「今後メンテナンスしない」と発表されました。

これからSassを学ぶなら「LibSass」+「gulp」をおすすめします。

Compass

Compassをインストールする

Sassと同様に、Macはターミナル、WindowsはコマンドプロンプトからCompassをインストールします。

$ gem install compass

「Successfully installed compass-＊＊＊＊」のようなメッセージが表示されたらインストール成功。こちらも念のため、正常にインストールできたか確認をしておきましょう。

$ compass version
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2018 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

---

Compassの初期設定

Compassのインストールが完了したら、compassコマンドが使えるので、 前回使用した`「デスクトップ>test」で初期設定をしてみましょう。

ディレクトリ移動〜Compass初期設定

$ cd ~/desktop/test/
$ compass create

上記のcompass createを実行すると、このようにファイルが展開されます。

$ tree
.
├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

2 directories, 8 files

オプションを付けてみよう

ディレクトリ名などを自分で設定したい場合は、compass create にオプションを付けてファイルを生成すればOK。

$ compass create --sass-dir "sass" --css-dir "" --javascripts-dir "js" --images-dir "images"

このオプションでは以下の設定を行っています。
– --sass-dir "sass"  sassのディレクトリはsassディレクトリ
– --css-dir "" cssのディレクトリはカレントディレクトリ
– --javascripts-dir "js" javascriptのディレクトリはjsディレクトリ
– --images-dir "images" 画像のディレクトリはimagesディレクトリ

$ tree
.
├── config.rb
├── ie.css
├── print.css
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── screen.css

1 directory, 7 files

また、「ie.scss」や「print.scss」、「screen.scss」のような最初に作られるscssファイルがいらない場合は、compass createにオプション—bareを付けてあげればOK。

$ compass create --bare

すると、config.rbとsassフォルダだけが生成されます。

オプションを確認してみよう

生成された「config.rb」に指定したオプションや設定が反映されるので確認してみましょう。設定が反映されているはずです。

require 'compass/import-once/activate'
Require any additional compass plugins here.

Set this to the root of your project when deployed:
http_path = "/"
css_dir = ""
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
.
.
.

基本設定をしよう

「config.rb」にscssファイルをコンパイルする際の設定が記されています。
自分の環境にあわせて「config.rb」を編集して保存するとコンパイル時に反映されるはずです。
それでは基本的な設定を見ていきましょう。

• http_path → サイトのパス
• sass_dir → sassのディレクトリ
• images_dir → 画像のディレクトリ
• javascript_dir → javascriptのディレクトリ
• line_comments → scssファイルの何行目に記述されたものかを出力するか
• output_style:nested → Sassファイルのネストを引き継いで出力
• output_style:expanded → {} で改行して出力
• output_style:compact → セレクタと属性を1行にまとめて出力
• output_style:compressed → すべてを1行にまとめて出力

---

キャッシュを吐き出さない設定

初期設定のままだとsassのキャッシュがどんどん作られてしまいます。
このキャッシュが不要なら「config.rb」にキャッシュを吐き出さないように設定しましょう。

cache = false

これでキャッシュが生成されなくなります。

---

Compassでのコンパイル

CompassにもSCSSファイルからCSSを生成する機能があります。CompassのCSSフレームワークを利用する際にはcompassコマンドでSCSSファイルをコンパイルしましょう。
「config.rb」があるディレクトリで以下のコマンドを実行すれば、変更を監視して、保存の度にコンパイルしてくれます。

$ compass watch

---

CompassのCSSフレームワークをインポート

Compassには様々なミックスインやCSSスプライト自動作成機能が用意されています。このCompassの機能を使うには、@importで必要な機能をインポートします。

例）Compassのミックスインを使う

@import "compass";

@import "compass";でCompassのコアモジュールを呼び出すことができるようになります。以下のように個別にインポートすることもできます。

@import "compass/css3";
@import "compass/typography";
@import "compass/utilities";

Compassのミックスインを呼び出してみます。

.gnav{
  ul{
    li{
      @include border-radius;
      @include inline-block;
    }
  }
}

コンパイルが実行されると、以下のようなCSSが出力されます。

.gnav ul li {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

ほかにもCSS3のミックスインはたくさんあります。

.flex{
  @include display-flex;
}

.transition{
  @include transition(ease-in-out , 0.5s);
}

.boxShadow{
  @include box-shadow(0 10px 0 0 rgba(0,0,0,0.5));
}

.rotate{
  @include rotate(15deg);
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

.flex {
  display: -webkit-flex;
  display: flex;
}

.transition {
  -moz-transition: ease-in-out, 0.5s;
  -o-transition: ease-in-out, 0.5s;
  -webkit-transition: ease-in-out, 0.5s;
  transition: ease-in-out, 0.5s;
}

.boxShadow {
  -moz-box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.5);
}

.rotate {
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}

このように、Compassはベンダープレフィックスなんかを自動で追加してくれたりするミックスインなどがたくさん用意されています。

ベンダープレフィックスの自動追加で行数が減ってCSSの見通しが良くなったり、コーディングの時間を削減できたりと様々な恩恵を受けることができます。

次回「 ネスト」