HTML不会从scss SASS中获取margin-bottom

Question

它只是不需要保证金，我不明白。为什么？

它使用背景、颜色、填充和文本对齐的第一部分，但看不到底部边距部分。我尝试在浏览器中检查它，它根本没有出现在样式中。

它可能看不到 & 子类。但它确实在网站的所有其他部分看到了这样的类。此问题仅出现在页脚中。这种语法非常适合上半部分。

.footer {

    background-color: $darkBlue;
    color: $white;
    padding: 2.5rem;
    text-align: center;

    a {
        color: $white;
    }

    &__logo {
        margin-bottom: 1.875rem;
        display: block;
    }

    &__social {
        margin-bottom: 1.875rem !important;
    }

    &__links {
        &.col1 {
            margin-bottom: 1.875rem;
        }
        &.col2 {
            margin-bottom: 1.875rem;
        }
    }

    &__cta {
        &.button {
            margin-bottom: 1.875rem;
        }
    }

    &__copyright {

    }
}

<footer class="footer">

  <a class="footer_logo" href="#">
    <img src="/images/TNlogo.svg" />
  </a>

  <div class="footer_social">
    <a href="#">
      <img src="/images/icon-facebook.svg" alt="Facebook">
    </a>
    <a href="#">
      <img src="/images/icon-youtube.svg" alt="Youtube">
    </a>
    <a href="#">
      <img src="/images/icon-twitter.svg" alt="Twitter">
    </a>
    <a href="#">
      <img src="/images/icon-pinterest.svg" alt="Pinterest">
    </a>
    <a href="#">
      <img src="/images/icon-instagram.svg" alt="Instagram">
    </a>
  </div>

  <div class="footer_links col1">
    <a href="#">Blabla</a>
    <a href="#">Blabla</a>
    <a href="#">Blabla</a>
  </div>

  <div class="footer_links col2">
    <a href="#">Blabla</a>
    <a href="#">Blabla</a>
    <a href="#">Blabla</a>
  </div>

  <div class="footer_cta">
    <a href="#" class="button">random blabla</a>
    <div class="footer__copyright">
      &copy; Blablablablabla
    </div>
  </div>
</footer>

Answer 1

scss 中可能一个下划线对多个/html 中短一个下划线

&__logo {
    margin-bottom: 1.875rem;
    display: block;
}

&__social {
    margin-bottom: 1.875rem !important;
}

应该是：

&_logo {
    margin-bottom: 1.875rem;
    display: block;
}

&_social {
    margin-bottom: 1.875rem !important;
}