• sass

    実践まとめ③

    2012/10/09

    設定ファイルの中身と制御(_setting.scss)

    compass.png

     

    _setting.scssの中身

    対応するブラウザについての設定を書きます。


    独自に変数を用意して定義してもいいですが、compassで既に定義されているので、それを使っちゃいましょー。
    ブラウザ対応やベンダープリフィックスの出力を設定できます。

     

    こんな風にかいています

    _setting.scss

    
    /*
    * サポートするブラウザの設定
    サポートするブラウザの値をtrueにします。
    */
    //IE 6
    $legacy-support-for-ie6 : true;
    //IE 7
    $legacy-support-for-ie7 : true;
    
    /*
    * ブラウザのベンダープリフィックス出力設定
    * 出力するブラウザの値をtrueにします。
    */
    //Fire fox
    $experimental-support-for-mozilla: false !default;
    
    //Safari・Chrome
    $experimental-support-for-webkit: false !default;
    
    //Opera
    $experimental-support-for-opera: false !default;
    
    //IE9
    $experimental-support-for-microsoft: false !default;
    
    

    作業に入る前に、まずここの値(true / false)を決めます。

    対応ブラウザにIE6が入っている場合は、$legacy-support-for-ie6 : true;

    CSS3でfirefox用のベンダープリフィックス(-moz-)を出力したい場合は、

    $experimental-support-for-mozilla: true !default;

    このように、対応したいブラウザの値をtrueにします。
    例えばスマホ案件の場合は、-webkit-のみtrue

    あとは全てfalseにすることで余計なcssが出力されないよう制御できます。

     

    _setting.scssファイルの中身はこれだけ!


    気をつけないといけないのは、この_settingファイルはcompassを読み込む前に読み込んでおくこと!
    compass読み込み後だと制御をしてくれません。


    また、この変数を使って独自に定義したりもしてます。


    ・対応ブラウザに応じたclearfixの@mixinを作る

    compassで定義されている@mixinのclearfixを@includeすると、


    
    @include clearfix;
    
    

    以下が出力されます。

    
    overflow: hidden;
    *zoom: 1;
    
    

    これを使って独自に@mixinを作ります。

    ※これは_mixin.scssファイルに記述しています。


    
    @mixin cf{
      @if $legacy-support-for-ie6 or $legacy-support-for-ie7{
        @include clearfix; //compassのclearfixを読み込み
      }
      &:after{
      display: block;
      visibility: hidden;
      clear: both;
      height: 0;
      content: ".";
      }
    }
    
    

    ※clearfixだとcompassの@mixin名と同じになってしまう為"cf"という名前にしました。


    IE6またはIE7が対応ブラウザの場合、compassで定義されているclearfixが出力され、
    それ以外では:afterを使ったclearfixのみが出力されます。


    これを@include cf;で使用してもいいのですが、
    clearfixは頻繁に使うことがあると思うので、%(プレースホルダ)で定義し@extendで使用します。


    
    //@extend用のプレースホルダを作成
    %clearfix{
      @include cf;
    }
    
    

    使用する時は、このように書きます。

    
    .hoge{
      @extend %clearfix;
    }
    .hogehoge{
      @extend %clearfix;
    }
    
    

    ▼出力結果(IE6・IE7対応の場合)

    
    .hoge, .hogehoge {
      overflow: hidden;
      *zoom: 1;
    }
    .hoge:after, .hogehoge:after {
      display: block;
      visibility: hidden;
      clear: both;
      height: 0;
      content: ".";
    }
    
    

    このように、_setting.scssに記述されている変数を使って

    ハックなどを@mixinで定義すると便利です!

     

    まとめ④に続く

    タグ:まとめ , Compass , Sass

この記事へのコメント

コメントを送る

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

back