Bracket Placement in Sass: Nest CSS with Sass

HTML-CSS
1

How come the following is correct

 .blog-post {
    
  }
  h1 {
    text-align: center;
    color: blue;
  }
  p {
    font-size: 20px;
  }

But this is not correct? They produce the same result. I understand that the first example that paragraph is not within the first header and is technically still its own separate property but is the code below still accepted syntax in development?

 .blog-post {
    
  }
  h1 {
    text-align: center;
    color: blue;
  }
  p {
    font-size: 20px;
  }
2

Maybe it is just me but the syntax looks exactly the same in both.

3

I think you meant to post this for the SCSS

.blog-post {
  h1 {
    text-align: center;
    color: blue;
  }
  p {
    font-size: 20px;
  } 
}

The difference is the scope of the selectors, the above SCSS is equivalent to this CSS

.blog-post h1 {
  text-align: center;
  color: blue;
}

.blog-post p {
  font-size: 20px;
}
1 Like