• sass

    実践まとめ⑤

    2012/10/11

    @mixinファイルの中身(_mixin.scss)

    compass.png

     

    _mixin.scssの中身

    よく使うスタイルや使い回せるスタイルを@mixin化します。
    @mixinしたスタイルは@includeしないと出力されません。
    つまり、どれだけ@mixin化しても@includeしない限りcssに影響しないわけです。

     

    私は同じスタイル値のみが違うスタイル記述量が膨大になってしまうスタイルが3回以上現れた場合、もう@mixin化してしまいます。


    スタイルの呼び出しは @include mixin名; の1行で終わるのでscssファイルもスッキリ見やすくなります。

    参考:【Sass】@mixin


     

    _mixin.scssファイルに書いている@mixinの一部を紹介します


    縦方向2色のグラデーション

    画像サイズの取得と出力

    背景画像をdataURI(date64)で出力する

    画像を1/2サイズで表示する

    背景画像を1/2サイズで表示する

    テキストリンクのスタイル

    疑似要素

    リンクのアイコン[>]

    clearfix



    縦方向2色のグラデーション

    
    @mixin bg_gradient($bg_color,$from,$to){
      background: $bg_color;
      @include background(linear-gradient(top, $from 0%, $to 100%));
    }
    
    

    引数に(単色カラー,グラデーション始まりのカラー,グラデーション終わりのカラー)を入れました。
    単色カラーはCSS3を対応していないブラウザ用に記述しています。

    @include background(~~の部分はcomapssで定義されているグラデーションの@mixinをひっぱってきています。

    これを@includeすると_setting.scssで設定したブラウザに応じてベンダープリフィックス付きでcssに出力することができます。

     

    この@mixinを呼び出す時はこのように書きます

    
    @include bg_gradient(#f80,#f80,#ff0);
    
    

     

    css3非対応のブラウザではオレンジ色に、対応ブラウザの場合はオレンジ→黄色のグラデーションが表示されているはずです。
    引数に任意のカラーをいれることで、縦方向2色グラデーションの使い回しができるようになりました。



    画像サイズの取得と出力

    
    @mixin imgSize($img){
      width: image-width($img);
      height: image-height($img);
    }
    
    

    image-widthimage-heightはcompassの独自機能で、画像サイズを取得をしてくれるものです。


    この@mixinを呼び出す時はこのように書きます

    
    @include imgSize("画像名.拡張子");
    
    

    これだけで対象画像のwidthとheightが出力されます。
    引数の中の画像は設定ファイル(config.rb)に記述されているimages_dirからの相対パスで指定します。


     

    背景画像をdataURI(date64)で出力する

    
    @mixin img64($img){
      background: inline-image($img) no-repeat;
    }
    
    

    この@mixinを呼び出す時はこのように書きます

    
    @include img64("画像名.拡張子");
    
    

    inline-imageもcompassの独自機能で、画像をdataURIに変換して出力してくれるものです。


    変換の手間がかかり、膨大なコード量になるdataURIもこれを使えば楽々出力できますね!
    ・画像サイズの取得と出力と同じく、引数に入れる画像は設定したimageディレクトリからの相対パスになります。



    画像を1/2サイズで表示する

    
    @mixin halfImg($img){
      $img_width: round(image-width($img)/2);
      $img_height: round(image-height($img)/2);
      width: $img_width;
      height: $img_height;
    }
    
    

    スマホサイトでは端末解像度の為に画像を1/2のサイズで表示することがあります。
    その時にこの@mixinを呼び出します。


    この@mixinの呼び出し方

    
    @include halfImg("画像名.拡張子");
    
    

    同じく画像は相対パスで。



    背景画像を1/2サイズで表示する

    
    @mixin bg_halfImg($img){
      display: inline-block;
      $img_width: round(image-width($img)/2);
      $img_height: round(image-height($img)/2);
      width: $img_width;
      height: $img_height;
      -webkit-background-size: $img_width auto;
    }
    
    

    同じく背景画像を1/2サイズで表示したい場合に使う@mixinです。
    background-size: 幅 auto; で背景サイズを自動調整しています。


    この@mixinの呼び出し方

    
    @include bg_halfImg("画像名.拡張子");
    
    

    同じく画像は相対パスで。



    テキストリンクのスタイル

    
    @mixin txt_link($style){
      color: $link_color;
    
      &:link{
      color: $link;
      }
      &:visited{
      color: $visited;
      }
      &:hover{
      color: $hover;
      }
      &:active{
      color: $active;
      }
      @if $style == linkLine{
      text-decoration:underline;
    
        &:hover{
        text-decoration:underline;
        }
      }
      @else if $style == hoverLine{
      text-decoration:none;
    
        &:hover{
        text-decoration:underline;
        }
      }
      @else if $style == noLine{
      text-decoration:none;
    
        &:hover{
        text-decoration:none;
        }
      }
    }
    
    

    _base.scssで宣言したリンクについての変数を使った@mixinです。
    まずは指定したカラーの適用。
    それから条件分岐をしています。
    下線ありのテキストリンクの場合マウスオーバーすると下線が表示される場合下線なしの場合です。

    呼び出し方は下の3つになります。

    
    @include txt_link(linkLine); //常に下線あり
    
    @include txt_link(hoverLine); //hover時に下線あり
    
    @include txt_link(noLine); //常に下線なし
    
    

    引数の変数の値を変えることで、3パターンのリンクテキストのスタイルが設定できます。



    疑似要素

    
    %bfaf{
      position:absolute;
      display:block;
      content:"";
    }
    
    @mixin bfaf{
      @extend %bfaf;
    }
    
    

    呼び出し方はこれ

     

    
    :before{
      @include bfaf;
    }
    
    :after{
      @include bfaf;
    }
    
    

    すみません。@mixin名のbfafは、before,afterの略です(びふぉあふ)
    要素の前後に内容を追加する疑似要素「:before」「:after」を使うことがよくありますが
    両方に共通する部分が上の3行ですね。

    これ、最初は@mixin bfafの中に書いていたんですが、
    疑似要素を使った別の@mixinを作る場合に

    
    @mixin mixin名{
      @include bfaf;
      ~~~~~~~~~;
      ~~~~~~~~~;
    }
    
    

    となるのを見てうーーん。と思いました。


    これだと毎回@mixin bfafの内容が展開されて、結局cssの記述量が増えてしまいます。
    しかも、@mixinのものは@mixin内で完結したいし(は?)

    ということで上の3行はプレースホルダセレクタ(%) の中で定義します。

    プレースホルダセレクタは、@extend用のセレクタで、そのものだけでは出力されず、
    @extendされた時にその中身だけが展開されます。
    しかも!@extendなので共通部分(bfafの3行)を自動でグループ化して出力してくれるんですね。


    こうすることで、他の@mixinスタイルでもcss量を増やさず使い回せることになりました。



    ・リンクのアイコン[>]

    
    @mixin link_arrow($color){
      @extend %bfaf;
      top:50%;
      right:10px;
      width:6px;
      height:6px;
      margin-top:-4px;
      border-top:3px solid $color;
      border-right:3px solid $color;
      -webkit-transform:rotate(45deg);
    }
    
    

    ※-webkit-対応ブラウザ(safari/chrome)で見てください。

     

    スマホサイトよく見るこの>マークのアイコン。
    これは疑似要素で作るので%bfafを@extendします。
    引数に色の変数を入れました。


    呼び出し方はこれ

    
    :before{
      @include link_arrow(#カラーコード);
    }
    
    


    ・clearfix

    
    @mixin cf{
      @if $legacy-support-for-ie6 or $legacy-support-for-ie7{
        @include clearfix;
      }
      &:after{
      display: block;
      visibility: hidden;
      clear: both;
      height: 0;
      content: ".";
      }
    }
    
    %clearfix{
      @include cf;
    }
    
    

    【Sass】実践まとめ③の方にも書きましたが、
    対応するブラウザによって出力するcssをかえる条件分岐を書きます。
    clearfixは頻繁に使用する為、毎回@includeして展開すると、膨大なcss量になってしまいますね。
    なので、先にプレースホルダに@includeし、使用する時は@extendして使います。
    こうすることで、clearfixをしたセレクタは全てグループ化されて出力されます。

     

    
    .aa{
      @extend %clearfix;
    }
    .bb{
      @extend %clearfix;
    }
    .cc{
      @extend %clearfix;
    }
    
    

     

    出力結果(IE6とIE7を非対応ブラウザにした場合)

    
    .aa:after, .bb:after, .cc:after{
      display: block;
      visibility: hidden;
      clear: both;
      height: 0;
      content: ".";
    }
    
    


    このように、変数や引数や条件分岐を使うことで
    便利で使いやすい@mixinを作ることができます。
    @mixin名は私独自で決めたものなので、自分(作業者)がわかりやすい名前にしましょう!(bfafとかね)


    まとめ⑥に続く

    タグ:まとめ , Compass , Sass

この記事へのコメント

コメントを送る

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

back