Compassにはベンダープレフィックスを自動で追加してくれたりするミックスインなどが用意されていて、プロジェクトごとにSassの設定を変えたりできる。
Sassをより便利に使うためのCSSフレームワークである。
しかし Autoprefixer によるベンダープレフィックス管理が注目を集め、Ruby Sassよりも高速なC/C++製 LibSass も登場。Compassの利用者は一気に減少。 2016年、「今後メンテナンスしない」と発表された。
これからSassを学ぶなら「LibSass」+「gulp」をおすすめする。
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
にオプションを付けてファイルを生成すればよい。
$ 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
を付けてあげればよい。
$ 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
で必要な機能をインポートする。
CSSスプライト:複数の画像を一枚の画像にまとめて、CSSのポジションを指定で表示する画像を変えること。
例)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の見通しが良くなったり、コーディングの時間を削減できたりと様々な恩恵を受けることができる。
次回「 ネスト」
コメントを残す