Question

我正在使用SCSS设计样式的原型。由于某种原因，当我将margin-top: 0;放在父元素上时，它没有生效。当我将margin-top放在嵌套类中时，它可以工作。有人可以解释我在做什么错吗？这是无法正常使用的完整代码段：

.form__row{
 margin-top: 0;

 &__error-message{
  color: $color--negative;
 }

 &__success-message{
  color: $success-body-text;
 }

 &__attention-message{
  color: $attention-body-text;
 }

 &__info-message{
  color: $info-body-text;
 }
}

以下是有效但设计不佳的代码段：

.form__row{

 &__error-message{
  color: $color--negative;
  margin-top: 0;
 }

 &__success-message{
  color: $success-body-text;
  margin-top: 0;
 }

 &__attention-message{
  color: $attention-body-text;
  margin-top: 0;
 }

 &__info-message{
  color: $info-body-text;
  margin-top: 0;
 }
}

最后，这是呈现的HTML：

<div class="detail-group__row ">
 <p class="form__row__success-message">
   <span class="icon-check small" aria-hidden="true"></span>

   Lorem ipsum dolor sit amet consecutir.
  </p>
</div>

SCSS Margin-top除非在嵌套类中，否则不起作用

0 个答案: