• sass

    @extend

    2012/06/06

    Sassの機能、@extendについて

    sass.png

    @extendとは・・・
    指定したセレクタのスタイルを継承してくれる機能です。

    セレクタのグループ化を自動でやってくれる為cssの記述量を減らすことができます。

    <↓グループ化>

    .AA, .BB, .CC{

    }

    <書き方>
    .hoge{
        @extend 継承するセレクタ;
    }

    <使用例>

    
    .boxA{
      width: 50px;
      height: 50px;
      color: #fff;
    
      p {
        color: #999;
      }
    }
    
    .boxB{
      @extend .boxA; //.boxAのスタイルを継承します
      color: #000; //追加のスタイル
    }
    
    

    <コンパイル結果>

    
    .boxA,
    .boxB{
      width: 50px;
      height: 50px;
      color: #fff;
    }
    .boxA p,
    .boxB p{
      color: #999;
    }
    .boxB{
      color:#000; ←追加したスタイルはグループ化されない
    }
    
    

    <注意点>
    継承するのは指定したセレクタだけのスタイルではなく、指定したセレクタを含むすべてのセレクタのスタイルも継承します。

    上の例でいうと、@extendしたのは.boxAですが、

    .boxAのスタイルだけではなく、ネストして記述されているpのスタイルも継承されました。

     


    プレースホルダーセレクタ(Sass バージョン3.2~)

    Sassバーション3.2から、プレースホルダセレクタというものが使えるようになります。

    プレースホルダセレクタを使い@extendすると、スタイルのみが継承され、セレクタ自体はCSSに出力されません。
    プレースホルダセレクタはクラスの"."やIDの"#"ではなく、"%"をを使います。

    スタイルのみの継承というと@mixinと同じような感じがしますが、

    @extendはさらにセレクタのグループ化まで自動でしてくれます。

    <使用例>

    
    %boxA{
      width: 100px;
      height: 100px;
    }
    .boxB{
      @extend %boxA;
    }
    .boxC{
      @extend %boxA;
      color: #000;
    }
    
    

    <コンパイル結果>

    
    .boxB,
    .boxC{
      width: 100px;
      height: 100px;
    }
    .boxC{
      color:#000;
    }
    
    

    このように、@extendしたセレクタ(%boxA)は出力されずに、スタイルのみを継承できるようなりました。

    クラス名/ID名で@extendした方がいいのか、プレースホルダで@extendした方がいいのか、よく考えて使いましょう。

    失敗しやすい@extendですので、個人的には、危険が少ない%の方がおすすめです!

    タグ:Sass

この記事へのコメント

コメントを送る

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

back