如何簡化此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;
  }
}

您可以在此處閱讀有關使用&訪問父選擇器的更多信息。

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的考慮，嵌套會產生比其解決的問題更多的問題。