BLOG

何気なく使っていた機能は実はCompassの機能だった

僕の中でsassとcompassはワンセットなので取り立ててこれがコンパスの機能でこれがsassの機能だって意識した事はありませんでした。この便利機能はcompassのものだったのか!と思うと今更ながら新しい発見のような気がしてちょっと特した気分です。というわけで今回はcompassです。と言っても前述の通り特に意識して使っていたわけではないので、mixinとかしか使ってないのですが、まぁそれもでも知っていれば便利なことなのでご紹介します。

compass createで初期設定

プロジェクトの初期設定ファイルを生成する事ができます。ターミナルで任意のディレクトリに移動し

を入力すると以下の構成のファイルが生成されます。

引数に

等を記述することによりディレクトリ名を任意のものに変更することも可能ですが、正直僕はこの機能はつかいません。 config.rbをプロジェクト毎に書き換え手動で設置しています。 sassの記事の内容と重複しますが僕の設定です。

その他のconfigの詳しい設定はこちらに掲載されています。

compass wでsassファイルを監視

ターミナルでconfig.rbの格納されたディレクトリに移動し

を入力するとsassファイルか監視されsassファイルの保存時に自動的にコンパイルされます。

便利なmixin

mixinもたくさん揃っています。詳しくは本家のリファレンスで見てもらった方がいいのかもしれませんが僕がよくつかうmixinだけでも紹介させていただきます。

まずcompassを使うためにcompassのモジュールをインポートします。

これでコンパスのモジュールが使えます。

display: inline-block

ディスプレイインラインブロックはie系で解釈がちがうのでie用のスタイルの記述も必要なのですがcompassのmixinをつかえば

@include inline-block;

を記述するだけで以下のクロスブウザ対応のcssが生成されます。

clearfix

floatの解除のやつです。

コンパイルされたCSS

CSSのリセット

CSSのリセットも

を記述するだけで

が生成されます。

cssスプライトが自動生成ができたり他にも便利な事ができそうですが今僕にある知識はこんなもんです。日々勉強ですな。

    Sponsored Links