Nest CSS with Sass passed on fcc but not on codepen

HTML-CSS
#1

*Tell us what’s happening:

I passed in this test on fcc but when i tried doing the same code on my code pen, I am unable to get the result desired, My codepen link is https://codepen.io/meeramenon07/pen/LwLKqR

Your code so far


<style type='text/sass'>
  .blog-post {
    h1 {
    text-align: center;
    color: blue;
  }
  p {
    font-size: 20px;
  }
  }
  h1 {
    text-align: center;
    color: blue;
  }
  p {
    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/75.0.3770.142 Safari/537.36.

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

#2

You need to change the CSS Preprocessor to SCSS.

On Codepen, click the Settings button and go to the CSS tab then from the drop-down menu under CSS Preprocessor select SCSS.

Also, you should remove the <style> element from the CSS.

1 Like
#3