互換性のない変更: 複合セレクタの拡張

LibSass は現在、.message.info のような複合セレクタの拡張を許可していますが、その拡張方法は @extend の意図した動作と一致しません。拡張

互換性
Dart Sass
✓
LibSass
✗
Ruby Sass
✗

あるセレクタが別のセレクタを拡張する場合、Sass は拡張子と一致するすべての要素を、拡張されているクラスにも一致するようにスタイル設定します。つまり、.heads-up {@extend .info} と記述すると、HTML の class="heads-up" を class="heads-up info" に置き換えた場合と同じように機能します。

このロジックに従うと、.heads-up {@extend .message.info} は class="heads-up" を class="heads-up info message" に置き換えるように機能することが期待されます。しかし、LibSass と Ruby Sass では現在そうではなく、.info または .message のいずれかを持つすべてのセレクタに .heads-up を追加する代わりに、.info.message を一緒に持つセレクタのみに追加します。

Playground

SCSS構文

// These should both be extended, but they won't be.
.message {
  border: 1px solid black;
}
.info {
  font-size: 1.5rem;
}

.heads-up {
  @extend .message.info;
}
Playground

Sass構文

// These should both be extended, but they won't be.
.message
  border: 1px solid black

.info
  font-size: 1.5rem


.heads-up
  @extend .message.info

この問題を修正し、混乱を避けるため、実装をクリーンで効率的に保つために、Dart Sass では複合セレクタの拡張機能はサポートされず、将来の LibSass のバージョンでは削除されます。互換性を維持するために、代わりに各単純セレクタを個別に拡張する必要があります。

Playground

SCSS構文

.message {
  border: 1px solid black;
}
.info {
  font-size: 1.5rem;
}

.heads-up {
  @extend .message, .info;
}
Playground

Sass構文

.message
  border: 1px solid black

.info
  font-size: 1.5rem


.heads-up
  @extend .message, .info

CSS出力

.message, .heads-up {
  border: 1px solid black;
}

.info, .heads-up {
  font-size: 1.5rem;
}

⚠️ ご注意！

Sass は CSS がスタイル設定する HTML の詳細を認識していないため、@extend は、特定の HTML に適用されない余分なセレクタを生成する必要がある場合があります。これは、複合セレクタの拡張を停止する場合に特に当てはまります。

ほとんどの場合、これらの余分なセレクタは問題を引き起こさず、圧縮された CSS に数バイト追加するだけです。しかし、一部のスタイルシートでは古い動作に大きく依存している可能性があります。その場合は、複合セレクタをプレースホルダセレクタに置き換えることをお勧めします。

Playground

SCSS構文

// Instead of just `.message.info`.
%message-info, .message.info {
  border: 1px solid black;
  font-size: 1.5rem;
}

.heads-up {
  // Instead of `.message.info`.
  @extend %message-info;
}
Playground

Sass構文

// Instead of just `.message.info`.
%message-info, .message.info
  border: 1px solid black
  font-size: 1.5rem


.heads-up
  // Instead of `.message.info`.
  @extend %message-info

CSS出力

.heads-up, .message.info {
  border: 1px solid black;
  font-size: 1.5rem;
}