【Sass】CSSを書くならSassで書こう −Compassを使う-

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

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

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

CONTENTS

1 Compassをインストールする
2 Compassの初期設定
3 Compassでのコンパイル
4 CompassのCSSフレームワークをインポート
- 4.1 例）Compassのミックスインを使う
- 4.2 関連

Compassをインストールする

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

$ gem install compass

1	$ 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 version

Compass 1.0.3 (Polaris)

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

1 2	$ 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

$ tree

├── config.rb

├── sass

│ ├── ie.scss

│ ├── print.scss

│ └── screen.scss

└── stylesheets

├── ie.css

├── print.css

└── screen.css

2 directories, 8 files

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

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

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

1	$ 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

$ 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を付けてあげればよい。

$ compass create --bare

1	$ 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"
.
.
.

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

1	$ compass watch

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

Compassには様々なミックスインやCSSスプライト自動作成機能が用意されている。このCompassの機能を使うには、@importで必要な機能をインポートする。
CSSスプライト：複数の画像を一枚の画像にまとめて、CSSのポジションを指定で表示する画像を変えること。

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

@import "compass";

1	@import "compass";

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

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

@import "compass/css3";

@import "compass/typography";

@import "compass/utilities";

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

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

.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;
}

.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{

@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);
}

.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の見通しが良くなったり、コーディングの時間を削減できたりと様々な恩恵を受けることができる。

次回「ネスト」