CODEWITHSUNDEEP
htmlcsssassmargin
P. Vowk
P. Vowk

Reputation: 113

HTML won't take margin-bottom from scss SASS

It just doesn't take margin-bottom, I don't get it. Why?

It takes the first part with the background, color, padding and text-align, but it doesn't see the margin-bottom part. I tried checking it in the browser, it doesn't appear in the styles at all.

It might not see the ampersand subclasses. But it does see such classes for all the other parts of the website. This problem appeared in footer only. This syntax worked perfectly for the upper parts.

.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>

Upvotes: 0

Views: 280

Answers (1)

shaosson
shaosson

Reputation: 56

Possibly one underscore to many in scss/one underscore short in html

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

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

should be:

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

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

Upvotes: 1

Related Questions