重大变更: 扩展复合 选择器

LibSass 目前允许像 .message.info 这样的复合选择器被 扩展，但它的扩展方式与 @extend 的预期方式不匹配 。

兼容性
Dart Sass
✓
LibSass
✗
Ruby Sass
✗

当一个选择器扩展另一个选择器时，Sass 会将所有匹配扩展器的元素的样式设置为也匹配被扩展的类。换句话说，如果你写 .heads-up {@extend .info}，它的作用就好像你用 class="heads-up info" 替换了 HTML 中的 class="heads-up" 一样。

按照这个逻辑，你会期望 .heads-up {@extend .message.info} 的效果等同于用 class="heads-up info message" 替换 class="heads-up"。但目前 LibSass 和 Ruby Sass 中并非如此——它不会将 .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;
}

⚠️ 注意！

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