[Sass] @extend の挙動

classとplaceholder selecterについてそれぞれ@extendを試みた以下のSCSSをコンパイルする。


%ext {
 color:red;

  &::before {
    content: 'ext';
  }

  &[data-aaa="ext"] {
    border:solid 1px red;
  }
}

.klass {
@extend %ext;

  &::after {
    content: 'klass';
  }

  &[data-aaa="aaa"] {
    background:pink;
  }
 
  &.amb {
    color:yellow;
  }

  .child {
     width:100px
  }
}

.klass[data-bbb="bbb"] {
   background:black
}

.klass .child2 {
   height:100px;
}

.klass2 {
 @extend .klass;
}

.klass3 {
 @extend .klass2;
}

.klass4 {
 @extend %ext;
  box-shadow:0 0 5px #000;
}

結果こうなる

.klass, .klass2, .klass3, .klass4 {
  color: red; }
  .klass::before, .klass2::before, .klass3::before, .klass4::before {
    content: 'ext'; }
  [data-aaa="ext"].klass, [data-aaa="ext"].klass2, [data-aaa="ext"].klass3, [data-aaa="ext"].klass4 {
    border: solid 1px red; }

.klass::after, .klass2::after, .klass3::after {
  content: 'klass'; }
.klass[data-aaa="aaa"], [data-aaa="aaa"].klass2, [data-aaa="aaa"].klass3 {
  background: pink; }
.klass.amb, .amb.klass2, .amb.klass3 {
  color: yellow; }
.klass .child, .klass2 .child, .klass3 .child {
  width: 100px; }

.klass[data-bbb="bbb"], [data-bbb="bbb"].klass2, [data-bbb="bbb"].klass3 {
  background: black; }

.klass .child2, .klass2 .child2, .klass3 .child2 {
  height: 100px; }

.klass4 {
  box-shadow: 0 0 5px #000; }

classに対する@extendは対象範囲が広い。

.klassのスタイルを最初に設定しているこの部分だけを@extendする事に期待して

.klass {
@extend %ext;

  &::after {
    content: 'klass';
  }

  &[data-aaa="aaa"] {
    background:pink;
  }
 
  &.amb {
    color:yellow;
  }

  .child {
     width:100px
  }
}

@extendを書いていたとしても、

.klass2 {
 @extend .klass;
}

フタを空けてみれば .klass がセレクタに含まれているスタイルの全てにextendされている。

本当にextendした部分だけピックアップしてplaceholder selecterに置き換え、
それをextendした方がまだ余計なセレクタを生まずに済むが、
&の置換に関してはまだ不具合（と思われる挙動）があるので注意が必要。

シェア

関連