css - 如何简化这个 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

我看不出如何简化它。您需要在不同的 parent 下为 .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 访问父选择器的更多信息