解説
「Compass」とは、基本的には、CSSにベンダープレフィックスを自動で追加してくれるツールである。（それ以外の有用な関数等も定義されている）CSSを記述する上で、CSS3のコードを書く場合には、必須と言っても過言ではない。
更新日：2017年7月25日
環境構築方法
Rubyは、Ruby Install Guideに従い、Rubyがインストールされていること。
Windows環境以外では、基本的にインストールされている。
Windows環境以外では、基本的にインストールされている。
-
GEMシステムのアップデート注意事項！このようなシステムは、当然アップデートが行われるため、必要に応じて実行する必要がある。
gem update --system -
SASSのインストール注意事項！後述するCompassをインストールする場合には、Sassのインストールは不要。
gem install sass
Compassインストールする際に最適なバージョンのSassがインストールされる。
また、バージョン指定せずにインストールした場合、Stableでないものがインストールされる可能性があるため注意が必要。 -
Compassのインストール
gem install compass
初期設定
-
基本
compass create結果作成される環境├── config.rb ├── sass │ ├── ie.scss │ ├── print.scss │ └── screen.scss └── stylesheets ├── ie.css ├── print.css └── screen.css -
独自にフォルダ環境を設定したい場合の例
compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"結果作成される環境├── config.rb ├── sass │ ├── ie.scss │ ├── print.scss │ └── screen.scss └── css ├── ie.css ├── print.css └── screen.css └── js └── img -
config.rbとsassフォルダだけ作成する場合
compass create --bare結果作成される環境├── config.rb ├── sass
シンタックスの切り替え
デフォルトではSCSSのシンタックスなので、SASSシンタックスを使いたい場合、オプションで切り替える。
- オプション
- –syntax sass
- 例
-
基本設定でシンタックスをSASSにする場合の例
compass create --syntax sass
使用例
-
チューニングを無視した基本的な使用例
/* コンパスの基本機能を全部インポート */ @import "compass"; /* リセット用CSSをインポート */ @import "compass/reset/"; -
チューニングを考慮した使用例上記はあくまでもサンプルであり、
/* CSS3のborder-radiusのみインポート */ @import "compass/css3/border-radius"; /* CSS3関連のMixinをインポート */ @import "compass/css3/"; /* クリアフィックス等のユーティリティ系Mixinをインポート */ @import "compass/utilities"; /* リセット用CSSをインポート */ @import "compass/reset/";
必要な機能のみを指定してインストールすること！
SASSファイルからのCSSファイル生成方法
SCSSファイルは自動的にはCSSに変換することはない。
変換させるには、以下のコマンドを実行する必要がある。
変換させるには、以下のコマンドを実行する必要がある。
-
特定のSCSSファイルをコンパイルする方法このコマンドは、実行時、一度のみ有効である。
compass compile sass/style.scss -
sassディレクトリの中身を全部監視し変換する方法このコマンドは、終了させない限り、SCSSファイルに変更があるたびに、自動的に変換が実行される。
compass w
作成されたCSSは圧縮されないため、テスト時にはこのコマンドが有効となる。 -
sassディレクトリの中身を全部監視し変換する方法このコマンドは、終了させない限り、SCSSファイルに変更があるたびに、自動的に変換が実行される。
compass watch --output-style compressed
変換結果は１行に圧縮される。
実際のサイト作成時には、このコマンドを使用しなければならない。 -
公開前に実行するべき方法このコマンドは、実行時、一度のみ有効である。
compass compil --output-style compressed
変換結果は１行に圧縮される。
必須要素
情報
注意事項
重要
- Ruby Install Guideに従い、Rubyがインストールされていること。
更新履歴
- 2017/07/24 … 浅野 利博
- Sassのインストールに関する注意事項を追記。
- 2017/01/30 … 浅野 利博
- 新規作成