読者です 読者をやめる 読者になる 読者になる

NOT SO BADなブログ

Towards a not so bad world.

CompassつかってSCSS化。

技術系


(photo credit: psd via photopin cc)

百/一改善シリーズ。
ずっとやりたかったSCSS化にやっと手つけれました。。

しかしこれも超絶便利。
どう考えても学習コストよりメリットのほうが大きいので
最初からこれでやってもよかったな。。

導入準備

Compassインストール

せっかくやからCompassつかってみたかったので、
まずはRailsにCompassを導入してみた。

MahLab「Railsプログラマはこれを入れればすぐにズルいデザインをはじめられます!

こちらを参考に、GemfileにCompassを追加してbundle install。
あとはscssファイルに

@import \"compass\";

って書くだけ、、のはずがcompileするとエラーでちゃう。

File to import not found or unreadable: compass.

そのまんまエラー文でぐぐってこんな記事を発見。

すぱぶろ「File to import not found or unreadable: compass. in Rails 3.2.1

この記事を参考に、

gem \'compass\', :git => \'git://github.com/chriseppstein/compass.git\'
gem \'compass-rails\', :git => \'git://github.com/Compass/compass-rails.git\'

ってGemfileを修正してやると問題なくとおりました!
(:branch=>...があると通らなかったので削除してます)

SCSS,Compassの基礎

ドットインストールとかも見ててひと通り知識は仕入れてたけど、
実際つかいはじめるにあたってここを参考にさせてもらいました。

LIG「CSSの常識が変わる!「Compass」、基礎から応用まで!

伝説のデザイナーの会社ですね。
ものすごく網羅的にまとまってて助かりました。

SCSS化

既存CSSファイルを置き換え

準備ができたのでいよいよ移行開始。
まずはいままで書いてたCSSファイルをSCSSに拡張子変更。

SCSSではCSSの文法がサポートされてるから、
いったん中身そのままで拡張子だけ変えても問題なく動く。
こっからいろいろいじりますよー。

入れ子構造にしてみる

まずはセレクタを入れ子にしてみる。

.hoge {  
        font-size: 12px;  
    }  

    .hoge p {  
        color: red;  
    }

とかって書いてたのを、

.hoge {  
        font-size: 12px;  
        p {  
            color: red;  
        }  
    }

って書けるんですな。

親の指定は&をつかうので、

.hoge:hover {  
        hogehoge  
    }

みたいなやつは、

.hoge {  
        &:hover {  
            hogehoge  
        }  
    }

でオッケー。
地味にファイルがすっきりしていいですね。

変数をつかってみる

おつぎは変数化。
同じ色を何回も指定してるとことかで、

$color-red = #B54434; 

とかって設定しておけば、

p {
            color: $color-red;
    }

って感じで使いまわせる。
これは相当ありがたい。。

mixinをつかってみる

そしてこれもうれしいのがmixin。
今回はじぶんでmixin書いたりはせんかったけど、
Compassで用意してくれてるCSS3のmixinをめちゃ使いました。

-webkit-box-shadow: 0, 0, 10px, #a82f34;  
  -moz-box-shadow: 0, 0, 10px, #a82f34;  
    box-shadow: 0, 0, 10px, #a82f34;

いままでこんな感じでベンダープレフィックスすげーめんどくさかったのが、、

    @include box-shadow( 0,0,10px,#a82f34);

これだけでオッケー!
これはほんますばらしい。。

background-size, border-radius, box-sizing, box-shadow, text-shadow, transformとか
ベンダープレフィックスがいることすら気づいてなかったのとかも全部置き換え。

いやーいい世の中になってきましたね。。


ほかにも奥義のCSSスプライト自動生成とかあるみたいやけど、今回は不使用。
しかし念願のSCSS化ができてだいぶすっきりしましたよ。。

あとやりたいのはパフォーマンス改善とSEO対策。
そしてログインせんでも遊べるようにすることです。。

まだまだ先が長い。。