• sass

    Compass設定ファイル(config.rb)

    2012/07/31

    Compassの設定について。

    compass.png

    Compassを導入した時にできたconfig.rbファイルを編集し、色々な設定をしていきます。(参考:【Sass】Compassの導入

     

    初期にできる設定ファイルはこうなっています。

    スクリーンショット(2...

     

    一番上から説明していきます。

    # Require any additional compass plugins here.

    ここの下に、追加したいcompass pluginのパスを書きます。

     

    # Set this to the root of your project when deployed:

    ここは初期から書かれているので、自分の設定に合わせて修正します。

    ちなみに私はこう設定しています。

    
    http_path = "/"
    css_dir = "css"
    sass_dir = "scss"
    images_dir = "img"
    javascripts_dir = "js"
    
    

     

    このようにフォルダを指定せず/を書くと、compassが導入されているディレクトリ以下を全て監視できるようになります。

    
    http_path = "/"
    css_dir = "/"
    sass_dir = "/"
    images_dir = "img"
    javascripts_dir = "js"
    
    

    自動監視中、どこにscssファイルを置いても、同じ階層にcssファイルが作成されます。

     

    # You can select your preferred output style here (can be overridden via the command line):

    ここの下に、出力形式を書きます。(※既にコメントアウトされているので、設定したいもの以外を消せばOKです)

    ここが設定されていない場合はexpandedで出力されます。(出力形式

     

    すべて圧縮にしたい場合はこれ

    
    output_style = :compressed
    
    

     

    # To enable relative paths to assets via compass helper functions. Uncomment:

    ここの下で、Com­passで拡張された関数で使うURLを、絶対パスか相対パスかを指定することができます。

    relative_assets = trueで相対パス、falseで絶対パス。

    ここが設定されていない場合、デフォルトの絶対パスが指定されます。

     

    sprite機能を使いたい場合は、ここをtrueにする必要があります

    
    relative_assets = true
    
    

     

    # To disable debugging comments that display the original location of your selectors. Uncomment:

    ここでコメント付きのcssで出力するかの設定ができます。

    line_comments = trueの場合、

    css上にここが /*どのscssファイルの何行目に記述されたものか*/  のコメント付きで出力されます。 line_comments = false の場合、コメントは出力されません。

    (※デフォルトはコメントがついています)

     

    # If you prefer the indented syntax, you might want to regenerate this

    ここでSCSS記法ではなく、SASS記法に切り替えることができます。

     

     

    <応用 条件に応じて形式を変更する!>

    コンパイル時に引数を設定することで、開発環境用と本番環境用の切り替えを行うことができます。(開発環境用と本番環境用に切り替える

     

    書き方はこれ

    
    設定する項目 = (条件式)? 一致する場合 : 一致しない場合
    
    

    たとえば、本番環境用の場合はcompact形式で出力して、開発環境用はexpanded形式で出力したい場合。

    このように書きます。

    
    output_style = (environment == :production) ? :compact : :expanded
    
    

    environment == :production は環境 == 製品(本番用) という条件式です。

    一致する場合はcompact、一致しない場合(つまり開発環境用の場合)はexpanded形式で出力する となります。

     

    どの設定も、設定後→自動監視→scssに更新がかかると反映されます。

     

    自動監視スタートはこれをたたくだけ!

    
    $ compass watch
    
    

     

    えーいっ!

    タグ:Compass , Sass

この記事へのコメント

コメントを送る

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

back