SCSS Margin-top Not working unless inside nested class

Asked Sep 11 '18 at 17:14

Active Sep 11 '18 at 17:26

Viewed 224 times

I am working on a prototype that is styled using SCSS. For some reason, when I put the margin-top: 0; on the parent element, it is not taking effect. When I put the margin-top inside the nested classes, it works. Can someone explain what I am doing wrong? Here is the full code snippet that doesn't work how it is intended:

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

Here is the code snippet that works but is poor design:

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

Lastly, here is the HTML as rendered:

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

edited Sep 11 '18 at 17:26

asked Sep 11 '18 at 17:14

EliTownsend

does form__row have a margin? afaik margin isnt inherited – Chris Li Sep 11 '18 at 17:18
@ChrisLi, `
` does and `.form__row` is a class off of p tags
– EliTownsend Sep 11 '18 at 17:19
Edit your post and add your HTML structure. – Quentin Veron Sep 11 '18 at 17:21
@QuentinVéron done – EliTownsend Sep 11 '18 at 17:28
The p has a margin of its own. Setting the margin of its parent to 0 does not change that fact. – Mr Lister Sep 11 '18 at 17:37
@MrLister so should I specify the selector p.forn__row? – EliTownsend Sep 11 '18 at 17:46
1

You don't have any 'form__row' class in your HTML – Quentin Veron Sep 11 '18 at 17:47
@EliTownsend That depends on what you want to achieve. If you only want to write `margin-top:0;` in one spot, then `.detail-group__row > *:first-child {margin-top:0;}` will do the trick. Also see Quentin's comment. – Mr Lister Sep 11 '18 at 18:31
@MrLister I will give that a shot. Also there is not a specific class of `form__row` but with the nesting element of SASS, the class becomes `form__row__success-message` – EliTownsend Sep 11 '18 at 19:08
@EliTownsend Yes, but in your question, you start out with `.form__row{ margin-top: 0;` which does not do anything. – Mr Lister Sep 11 '18 at 19:14
Oh! Okay, I understand now – EliTownsend Sep 11 '18 at 19:19

SCSS Margin-top Not working unless inside nested class

0 Answers0