使用内部选择器（子类）扩展 SASS 类的最佳方法答案

【问题标题】：Best way to extend a SASS class with inner selector (subclass)使用内部选择器（子类）扩展 SASS 类的最佳方法
【发布时间】：2020-07-15 20:06:05
【问题描述】：

我为以下 HTML 设置样式以显示消息：

  <div className="message">
    <div className="message_label">
      A message
    </div>
  </div>

使用以下 SCSS 类：

  .message {
    margin: 10px;
    border-radius: 10px;
    border: 3px solid lightblue;
    &_label {
      color: #444;
      padding: 5px;
    }
  }

在 BEM 之后，我想为错误消息创建另一个修改器版本：

  <div className="message--error">
    <div className="message_label">
      This is an error!
    </div>
  </div>

这个版本只是将之前的颜色改为red 所以我想扩展之前的SCSS类：

  .message {
    margin: 10px;
    border-radius: 10px;
    border: 3px solid lightblue;
    &_label {
      color: #444;
      padding: 5px;
    }

    &--error {
      @extend .message;
      border: 3px solid red;
      &_label {
        color: red; // This is not working
      }
    }
  }

但是message_label 选择器不起作用，因为它是一个内部选择器，@extend 不会影响它，如SCSS Docs 中所述。扩展包含内部选择器的类的最佳方法是什么？

您可以查看DEMO here。

【问题讨论】：

标签： html css reactjs sass

【解决方案1】：

这不起作用的原因是@extend 所做的只是在不同的类之间共享一些 css 属性。所以在这种情况下，我希望它创建一个选择器，如：

.message, .message--error {
    margin: 10px;
    border-radius: 10px;
    border: 3px solid lightblue;
  }

  .message_label {
    color: #444;
    padding: 5px;
  }

  .message--error {
    border: 3px solid red;
  }

  .message--error_label {
    color: red;
  }

您可以在上述 css 的底部看到您的 color: red 实际上可能会如何最终出现在样式表中。

最后，请不要这样格式化你的 scss。维护和理解这将是一场噩梦。

回答

我对回答您的问题的建议是在同一个元素上使用 .message 和 .message--error，类似于 Bootstrap does things 的方式

【讨论】：