css - SASS继承——省略基类

Question

我可以使用这种语法在 SASS 中继承一个类

代码

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

输出

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

我想做类似的事情，输出中省略了 .message

期望的输出

.success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

这可能吗？

Answer 1

是的，使用占位符选择器:

SASS

%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message;
  border-color: green;
}

.error{
  @extend %message;
  border-color: red;
}

输出

.success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

问题是如果你想要像类一样的消息，那么你也必须扩展:

.message{
  @extend %message;
}