• sass

    Compassの導入

    2012/07/05

    compass.png

    なにかと便利なSassのフレームワークCompassについて。

    CompassとはSassのフレームワーク。

    Sassで作るファイル構成やミックスインがあらかじめ作られてます。
    とにかく便利!
    使わないと勿体無い!

    まずは導入

    
    $ sudo gem install compass
    
    

    これでインストールは終わり!

    一応確認。

    
    $ compass -v
    
    

    バージョンが表示されれば、ちゃんとインストールされてます!


    次はプロジェクトへの導入。

    
    $ cd <プロジェクトのルートディレクトリ>
    $ compass create
    
    

    これを叩けばこんなものができます。

    
    config.rb
    sass
    ├ ie.scss
    
    ├ print.scss
    
    └ screen.scss
    
    stylesheets
    ├ ie.scss
    
    ├ print.scss
    
    └ screen.scss
    
    

    ※【注意】すでにプロジェクトにsassやcssのディレクトリがあって、名前が重なってしまう場合は、上書きを避けるために一旦別の場所にコピーしておく!


    でもcssファイルのフォルダ名「stylesheets」ってあまり使わないですよね。
    ここはやっぱ「css」でしょって方は導入の際に

    
    $ compass create --css-dir "css"
    
    

    これでフィルダ名をcssに変更。


    え!もう導入したし!stylesheetフォルダできちゃってるし!って方は手動で変えちゃいましょう。

    フォルダ名の変更+ config.rbファイルを開いて css_dir = "stylesheets"を css_dir = "css"と書き換えても変更します。

     

    これで導入は終わりです。
    さっそくCompassを実行しましょー!

    
    $ compass watch
    
    

    なんとこれだけ!

    これでsassディレクトリの監視が開始されて、SCSSファイルが自動的にコンパイルされるようになります。

    試しにsassディレクトリにhoge.scssファイルをおいてみましょう。

    すぐにcssファイルにhoge.cssファイルが作成されているはずです。

    これが自動監視!

     

    ディレクトリを自動監視せず、特定のSCSSファイルを任意のタイミングでコンパイルしたい場合はこう書きます。

    
    $ compass compile <SCSSファイル>
    
    

    また、コンパイルするときの出力形式も選べます。(デフォルトはexpanded)

    
    $ compass watch --output-style 出力形式
    
    

    毎回指定するのが面倒!って方はconfig.rbファイルで設定しましょう。
    例えば毎回compressedで出力したいって方は

    
    # output_style = :expanded or :nested or :compact or :compressed
    
    

    ここをこう書き換える

    
    output_style = :compressed
    
    

    これでCompassを使う準備は完璧ですね!
    次は、具体的な使用例を書こうと思います。

    タグ:Compass , Sass

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back