解説

「Compass」とは、基本的には、CSSにベンダープレフィックスを自動で追加してくれるツールである。(それ以外の有用な関数等も定義されている)
CSSを記述する上で、CSS3のコードを書く場合には、必須と言っても過言ではない。
更新日:2017年7月25日

環境構築方法

Rubyは、Ruby Install Guideに従い、Rubyがインストールされていること。
Windows環境以外では、基本的にインストールされている。
  1. GEMシステムのアップデート
    
    		
    			gem update --system
    		
    		
    注意事項!このようなシステムは、当然アップデートが行われるため、必要に応じて実行する必要がある。
  2. SASSのインストール
    
    		
    			gem install sass
    		
    		
    注意事項!後述するCompassをインストールする場合には、Sassのインストールは不要。
    Compassインストールする際に最適なバージョンのSassがインストールされる。
    また、バージョン指定せずにインストールした場合、Stableでないものがインストールされる可能性があるため注意が必要。
  3. 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/";
    		
    		
    上記はあくまでもサンプルであり、
    必要な機能のみを指定してインストールすること!
注意事項!@import “compass”で全ての機能をインポートしてもリセット用スタイルは個別にインポートしないと書きこまれない。

SASSファイルからのCSSファイル生成方法

SCSSファイルは自動的にはCSSに変換することはない。
変換させるには、以下のコマンドを実行する必要がある。
  • 特定のSCSSファイルをコンパイルする方法
    
    		
    			compass compile sass/style.scss 
    		
    		
    このコマンドは、実行時、一度のみ有効である。
  • sassディレクトリの中身を全部監視し変換する方法
    
    		
    			compass w 
    		
    		
    このコマンドは、終了させない限り、SCSSファイルに変更があるたびに、自動的に変換が実行される。
    作成されたCSSは圧縮されないため、テスト時にはこのコマンドが有効となる。
  • sassディレクトリの中身を全部監視し変換する方法
    
    		
    			compass watch --output-style compressed
    		
    		
    このコマンドは、終了させない限り、SCSSファイルに変更があるたびに、自動的に変換が実行される。
    変換結果は1行に圧縮される。
    実際のサイト作成時には、このコマンドを使用しなければならない。
  • 公開前に実行するべき方法
    
    		
    			compass compil --output-style compressed
    		
    		
    このコマンドは、実行時、一度のみ有効である。
    変換結果は1行に圧縮される。

注意事項

重要

更新履歴

2017/07/24 … 浅野 利博
Sassのインストールに関する注意事項を追記。
2017/01/30 … 浅野 利博
新規作成

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.