Rails + compass

自分が作成したアルバムアプリの画面周りを改善したくcompass/bower/gruntsJSを使っていこうと思い調べている。
で、取りあえずcompassを使う環境設定までのメモを残す。
とは言え簡単なんだが・・・。

まずはGemfileに以下を追加

gem "compass-rails", github: "Compass/compass-rails"

追加したら、bundle installを実行

$ bundle install --path vendor/bundle 

では使えるかな、見てみましょ。
app/assets/stylesheets以下に適当なscssファイルを作成して試してみましょ。例えばcommon.css.scssというファイルを作ってみて、以下のように記載してみると適用されているのが確認できます。
これから、こちらも使っていってもっとレイアウトを奇麗にしたいと思います。ナレッジが溜まったらまた書きます。

 1 @import "font-awesome";
 2 @import "compass/utilities";
 3 @import "compass";

 
 24 // Compass
 25 .box {
 26   width: 100px;
 27   height: 100px;
 28   background: gray;
 29   -webkit-border-radius: 10px;
 30   -moz-border-radius: 10px;
 31   -ms-border-radius: 10px;
 32   -o-border-radius: 10px;
 33   border-radius: 10px;
 34 }

追記
角を丸めるものとシャドウをいれるメソッド

  @import "compass/utilities";
  @import "compass/css3";
  @import "compass/reset";
  @import "compass";
  menu {
    @include border-radius();
    @include box-shadow(rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset);
}

見れば見るほど色々便利だ、compass