• sass

    @mixin

    2012/06/06

    Sassの機能、@mixinについて。

    sass.png

    @mixinとは・・・

    ミックスインとは、"スタイルを保存できる場所"といった感じでしょうか。
    任意の名前で定義したスタイルを、何度も呼び出して使いまわすことができます。

    ※@mixinは定義しただけではcssに出力されず、@includeで呼び出すことで出力されます。

     

    <書き方>

    @mixin 任意のミックスイン名{
      スタイルの集合
    }
    ※ミックスイン名は数字で始めることはできません。
     

    <呼び出し方>

    呼び出したい場所{
      @include ミックスイン名;
    }

     

    cssでは何度も同じスタイルを記述することがよくあると思います。

    そんなよく使うスタイルは@mixinで定義して、呼び出し(@include)て使う!

    メリットとしては記述が減るだけではなく、スタイルを一括で管理できることと思います。

    <使用例>

    
    @mixin box-style{
      width:100px;
      height:100px;
      background:#fff;
      border:1px solid #f00;
    }
    
    .boxA{
      @include box-style;
      color:#000;
    }
    .boxB{
      @include box-style;
      color:#fff;
    }
    
    

    <コンパイル結果>

    
    .boxA{
      width:100px;
      height:100px;
      background:#fff;
      border:1px solid #f00;
      color:#000;
    }
    .boxB{
      width:100px;
      height:100px;
      background:#fff;
      border:1px solid #f00;
      color:#fff;
    }
    
    

    ミックスインの引数

    @mixinでは引数を指定することができます。

    多少のスタイルの差がある場合は、新しいミックスインを作らず引数で指定する方が便利です。

    指定したい引数は@includeの際に記述します。

    <書き方>
    @mixin ミックスイン名(引数,引数,引数){
        スタイル
    }

    <使用例>

    
    @mixin box-style($width, $color){
      width: $width;
      height: 100px;
      color: $color;
    }
    
    .boxA{
      @include box-style(200px, #f00);
    }
    
    

    <コンパイル結果>

    
    .boxA{
      width: 200px; ←引数の値が出力された
      height: 100px;
      color: #f00; ←引数の値が出力された	
    }
    

    初期値の指定

    引数には、初期値を設定することができます。

    @include時に値を指定しない場合、初期値として設定されたものが出力されます。

    <書き方>

    @mixin  ミックスイン名(引数名:初期値){

        スタイル

    }


    <使用例>

    	
    @mixin box-style($color, $style:solid){
     width: 20px;
     height: 20px;
     border: $color $style 2px;
    }
    .boxA{
     @include box(#000); //$styleの値を指定しない
    }
    .boxB{
     @include box(#fff, dotted);
    } 
    
    

    <コンパイル結果>

    
    .boxA{
      width: 20px;
      height: 20px;
      border: #000 sollid 2px; ←引数が指定されていなかった為、初期値のstyle(solid)が適用された。	
    }
    
    
    .boxB{
      width: 20px;
      height: 20px;
      border: #fff dotted 2px;		
    }
    
    

    <注意点>

    ※初期値を定義する引数は、初期値を定義しない引き数の後に書く

    ※@mixin ミックスイン名(引数名:初期値 ,引数名) ←これはエラーになります

     


    ミックスイン(&で親セレクタ参照)

    ミックスイン内で親セレクタを参照したい時は&で指定します。

    <使用例>

    
    @mixin text-link{
      text-decoration:under-line;
      &:hover{
        color:#fff;
      }
    }
    
    .text{
      @include text-link;
    }
    
    

    <コンパイル結果>

    
    .text{
      text-decoration:under-line;
    }
    .text:hover{
      color:#fff;
    }
    
    

    タグ:Sass

この記事へのコメント

コメントを送る

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

back