扩展复合选择器

LibSass当前允许复合选择器.message.info进行扩展，但是扩展方式@extend与工作方式不匹配。

兼容性：
Dart·Sass（Dart Sass）
✓
LibSass
✗
rubySass
✗

当一个选择器扩展另一个选择器时，Sass设置所有与扩展器匹配的元素的样式，就好像它们也与要扩展的类匹配。换句话说，如果你写的.heads-up {@extend .info}，它的工作原理就像你更换class="heads-up"你的HTML用  class="heads-up info"。

下面这个逻辑，你会想到，.heads-up {@extend .message.info} 工作像更换class="heads-up"用class="heads-up info message"。但是，这不是它是如何工作的，现在在LibSass和RubySass-而不是添加.heads-up到已选择的每个要么.info或者.message，它只是把它加到有选择.info.message在一起。

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;
}

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版本中将删除该功能。为了兼容性，用户应分别扩展每个简单的选择器：

SCSS  语法

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

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

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;
}

Head️抬头！

因为Sass不知道的细节HTML的CSS是要的风格，任何@extend可能需要生成将不适用于你的额外选择的HTML尤其如此。从扩展复合选择器切换开时，尤其如此。

在大多数情况下，这些额外的选择器不会引起任何问题，只会将几个额外的字节添加到压缩后的CSS中。但是某些样式表可能更多地依赖于旧行为。在这种情况下，我们建议将复合选择器替换为占位符选择器。

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;
}

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;
}