Question

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

.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）允许父母和＆amp;选择。为了弥补OOP的减少，我们略微缩进以暗示征服。但是在SASS中你想避免在不完全必要的情况下进行嵌套的诱惑，因为为了OOP而嵌套往往会产生比它解决的问题更多的问题。

如何简化此SASS语句？

2 个答案: