• sass

    @content(ver 3.2〜)

    2013/01/07

    Sassバージョン3.2で追加された機能@content

    sass.png

     

    @mixinにスタイルを渡す(@content)

    @mixinってスタイルの集合体なのに、

    @mixinにスタイルを渡す?はて?

    的な感じですが、 やってみて理解できました。

    
    @mixin mixinName{
      width: 100px;
      height: 100px;
    }
    
    

    このような@mixinを作ったあと、 今までは@includeする時にこのように書いていました。

    
    hoge{
      @include mixinName;
    }
    
    


    このね、@mixinの中に@contentを追加

    
    @mixin mixinName{
      width: 100px;
      height: 100px;
      @content;
    }
    
    

    @includeする時にmixin名のあとに{}をつけて、そこにスタイル記述。

    
    hoge{
      @include mixinName{
        color: #fff;
      }
    }
    
    

    この@inculede時に書いたスタイルが

    @mixinの@content部分に出力できるようになったんです!
    はい!わかりにくいですね!


    たとえば、上のように@includeした場合はをこのように出力されます。

    
    .hoge{
      width: 100px;
      height: 100px;
      color: #fff;
    }
    
    

    mixin名の中に書いたスタイル

    color: #fff;
    が、@mixinの@content部分に出力されたんですね!

    あれ、でもこれじゃ

    
    hoge{
      @include mixinName;
      color: #fff;
    }
    
    

    これと同じやんか!
    なのでこんな使い方はしませんきっとw
     

    これの便利なところは「@contentが記述されているところにスタイルが出力される」こと。
    しかも@contentがある度にその場所にスタイルが出力されます。


    例えば上の@mixinをこのように変えた場合、

    
    @mixin mixinName{
      width: 100px;
      height: 100px;
      @content;
      
      &:before{
        @content;
      }
    }
    
    

    hogeにも、hoge:beforeにもcolor: #fff;が出力されることになります。

    fmfm!なるほどね!

     

    Sassのサイトではこのように紹介されていました。

    
    @mixin iphone {
      @media only screen and (max-width: 480px) {
        @content;
      }
    }
    
    @include iphone {
      body { color: red }
    }
    
    

    メディアクエリの中に書くのか!

     

    ということはこういう@mixinを用意して

    
    //iPhoneサイズ用
    @mixin iPhone{
    	@media screen and (max-width: 480px) {
        @content;
      }
    }
    
    //iPadサイズ用
    @mixin iPad{
      @media screen and (min-width: 480px) and (max-width: 1024px) {
        @content;
      }
    }
    
    

    こうやって@includeして

    
    @include iPhone{
      hoge{
      ・・・
      }
      piyo{
      ・・・
      }
    }
    @include iPad{
      ・・・
    }
    
    

    ほげほげ!ぴよぴよ!すればいいってことデスネー\(^0^)/

    わかりやすくて素敵!

    タグ:Sass

この記事へのコメント

コメントを送る

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

back