Nest CSS with Sass unsure

HTML-CSS
1

Tell us what’s happening:

I am not sure if I am doing this right

Your code so far


<style type='text/sass'>
  .blog-post {
  nav {text-align: center;
    ul {color: blue;
    li {font-size: 20px;
    }
   }
  }
}
</style>

<div class="blog-post">
  <h1>Blog Title</h1>
  <p>This is a paragraph</p>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/nest-css-with-sass/

2

Hi @andrealorena83 Is your code working? What makes you unsure? :slight_smile:

<style type='text/sass'>
      .blog-post {
          nav {
              text-align: center;
              ul {
                  color: blue;
                  li {
                      font-size: 20px;
                  }
              }
          }
      }
</style>

<div class="blog-post">
  <h1>Blog Title</h1>
  <p>This is a paragraph</p>
</div>

I copied your code above, but adjusted the spacing a bit, and it looks fine just by glancing at it. It looks similar to this example, I got from a SASS basics tutorial:

.page {
    font-family: sans-serif;
    .content {
        background-color: black;
        .text {
            color: white;
            font-size: 12px;
            .headline {
                font-weight: bold;
                a {
                    color: blue;
                    &:visited {
                        color: green;
                    }
                    &:hover {
                        color: red;
                    }
                    &:active {
                        color: yellow;
                    }
                }
            }
        }
    }

}