• sass

    実践まとめ⑥【完】

    2012/10/11

    スタイル記述〜納品ファイルまで

    compass.png

     

    _layout.scssの中身

    サイトの基本レイアウトについて記述しているファイルです。
    全体のスタイルやheader、footer、sidebarなど、
    レイアウト共通スタイルは全部ここに書いてしまいましょう。


     

    例えばこんな感じ

    
    body{
      font-family: unquote($familyA);
      font-size: $sizeM;
      color: $color;
    }
    a{
      @include txt_link(noLine);
    }
    
    

    別ファイルで宣言した変数や、独自に定義した@mixinをフルに使ってやりましょう。
    これでもか!ってくらいに!!



    _各page.scssの中身

    これはもう、各ページ固有のスタイルをずらずらっと書くファイルです。

    とりあえず、ネストに気をつけましょう。

    最初はなーんて便利なんだ(感動)とネストしまくりがちです。

     

    結果、出力されたcssがこんな感じに!!

    
    #aa .bb .cc .dd .ee{
      ・・・
    }
    
    #aa .bb .cc .dd .ee .ff{
      ・・・
    }
    
    

    ってことが多々ありました私。

    ネストは○回層まで!とルールを決めた方がいい気がします。

     

    また、変数や@mixinや@extendをすると度々エラーにやられることがあると思います。

    その時も(私みたいに)取り乱さずに、エラー文をよく読んで解決することです。

    だいたい「; が抜けてるよ!」とか、「参照したい変数がないよ!」とか、「その引数間違ってるよ!」とかそんなたぐいです。

     

    このようにファイル分割を行うことで、管理がとってもしやすくなりますね。

    パーシャルファイルなので何枚@importしても1枚のcssで出力されます。
    1回のHTTPリクエスト


     

    納品用のファイルに変換する

    現在出力されているcssファイルはこんな感じ。

    come.png

    これがどのファイルのどこに書いてるよーっていう/*コメント*/がズララララ!と書き出されています。
    納品する時、これはもう必要ないので消してしまいます。


    config.rbファイルのこの部分をfalseにします。

    rb2.png


    そしてターミナルに以下を入力

    
    $ compass compile --force
    
    

    これでcssが強制的に再度コンパイルされ出力されます。

    cssの出力形式をかえたい場合も同じくconfig.rbファイルで設定してください。



    ふぅ

    まとめ、以上!!!
    他なにかあれば追記していきまーす!

    タグ:まとめ , Compass , Sass

この記事へのコメント

コメントを送る

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

back