HTML 不会从 scss 获取 margin-bottom SASS
HTML won't take margin-bottom from scss SASS
它只是不占用底部边距,我不明白。为什么?
它采用背景、颜色、填充和文本对齐的第一部分,但看不到底部边距部分。我试着在浏览器中检查它,它根本没有出现在样式中。
它可能看不到与号子类。但对于网站的所有其他部分,它确实看到了这样的 类。此问题仅出现在页脚中。这种语法非常适合上半部分。
.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">
© Blablablablabla
</div>
</div>
</footer>
可能在 scss/one 中一个下划线对多个下划线 在 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;
}
它只是不占用底部边距,我不明白。为什么?
它采用背景、颜色、填充和文本对齐的第一部分,但看不到底部边距部分。我试着在浏览器中检查它,它根本没有出现在样式中。
它可能看不到与号子类。但对于网站的所有其他部分,它确实看到了这样的 类。此问题仅出现在页脚中。这种语法非常适合上半部分。
.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">
© Blablablablabla
</div>
</div>
</footer>
可能在 scss/one 中一个下划线对多个下划线 在 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;
}