解説
「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
変換結果は1行に圧縮される。
実際のサイト作成時には、このコマンドを使用しなければならない。 -
公開前に実行するべき方法このコマンドは、実行時、一度のみ有効である。
compass compil --output-style compressed
変換結果は1行に圧縮される。
必須要素
情報
注意事項
重要
- Ruby Install Guideに従い、Rubyがインストールされていること。
更新履歴
- 2017/07/24 … 浅野 利博
- Sassのインストールに関する注意事項を追記。
- 2017/01/30 … 浅野 利博
- 新規作成