如何简化此 SASS 语句？

Question

如何简化这个 SASS 以便我只写一次 .question-sector-answer？如果父 div 具有 .question-row 和 .question-review 的类，我需要对 .question-sector-answer 应用不同的样式。这目前看起来很笨拙，我相信可以简化并变得更优雅：

.question-row {
  border-bottom: 1px solid #ddd;
  &.question-review {
    .question-sector-answer {
      padding-top: 30px;
    }
  }
  .question-sector-answer {
    padding: 15px;
  }
}

Answer 1

我不明白你可以如何简化它。您需要在不同的父母下为.question-sector-answer 使用2 种不同的样式。由于在 css 中不可能访问父选择器，因此您别无选择，只能做您所做的事情（好吧，在 SASS 中您可以 - 见下文）。虽然我个人更倾向于将更通用的选择器放在顶部，将更具体的选择器放在底部，如下所示：

.question-row {
  border-bottom: 1px solid #ddd;
  .question-sector-answer {
    padding: 15px;
  }
  &.question-review {
    .question-sector-answer {
       padding-top: 30px;
    }
  }
}

所以在 SASS 中，您可以使用 & 以某种方式访问​​父选择器，但我认为您不能用它重新创建您的样式，我能想到的最好的就是这个，但它看起来比您的丑原始方式，但欢迎您使用它：

.question-row {
   border-bottom: 1px solid #ddd;
}
.question-sector-answer
{
  .question-row & {
     padding-top: 15px;
  }
  .question-row.question-review &
  {
     padding: 30px;
  }
}

您可以阅读有关使用 & here 访问父选择器的更多信息

Answer 2

.question-row {
  border-bottom: 1px solid #ddd;
}
  .question-sector-answer {
    padding: 15px;
    .question-review & {
      padding-top: 30px;
    }
  }

这里的去嵌套有两件事情：(1) 创建更简洁、更灵活的 CSS 和 (2) 允许父级 & 选择器。为了补偿 OOP 的减少，我们稍微缩进暗示征服。但在 SASS 中，您要避免在并非完全必要时进行嵌套的诱惑，因为为了 OOP 而嵌套往往会产生比它解决的问题更多的问题。