• sass

    Compassを使う!(@mixin)

    2012/07/09

    Compassで定義されている@mixinの紹介。

    compass.png

    Compassで定義されているミックスイン。
    その中でもよく使う便利なものを何点か。


    まずは、Compassを読み込みます。

    
    @import "compass";
    
    

    リセット

    reset.cssです。
    ブラウザのデフォルトスタイルをリセット。

    
    @include global-reset;
    
    

    clearfix

    clearfixです。

    
    @include clearfix;
    
    

    リンクカラー

    リンクカラーを一括指定します。

    
    @include link-colors(#000, #hhh, #aaa, #vvv, #fff);
    
    

    ※左から通常時の文字色、:hover、:active、:visited、:focusの順。


    角丸

    よく使う角丸の指定も、記述が面倒なベンダープリフィックス付きで書きだしてくれます。

    
    @include border-radius(4px);
    
    

    box-sizing

    ボックスサイズの算出方法を指定するbox-sizingもベンダープリフィックス付きで書きだしてくれます。

    
    @include box-sizing(border-box);
    
    

    こんな感じで、@includeだけで楽々指定ができます!なんで便利なCompass!
    しかし。。。「角丸」「box-sizing」など自動でベンダープリフィックスを書きだしてくれるものは注意が必要です。

    上記の記述で出力されるベンダープリフィックスは
    Firefox向けの「-moz-」、Chrome,safari向けの[-webkit-」、Opera向けの「-o-」、IE向けの「-ms-」。
    これが毎回全て出力されるので、コード量が膨大になることが考えられますね。

    ということで、いらないものは出力されないようにしましょう!


    ベンダープリフィックスの制御

    Compassを使ったベンダープリフィックスの制御はこのように書きます。

    
    $experimental-support-for-mozilla     : true !default;
    $experimental-support-for-webkit      : true !default;
    $experimental-support-for-opera       : true !default;
    $experimental-support-for-microsoft   : true !default;
    
    

    制御したいブラウザの値をfalseにかえ、これを@import "compass";の前に書くことで制御することができます。
    例えば、

    
    $experimental-support-for-opera       : false !default;
    @import "compass";
    
    

    このように書けば、Opera向けのベンダープリフィックスのみ出力されなくなります。
    ふー安心!

    タグ:Compass , Sass

この記事へのコメント

コメントを送る

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

back