Not able to recreate Product Landing Page CSS functionality

HTML-CSS
#1

In the example project for the Product Landing Page, they seem to be able to nest elements in the CSS section such as:

footer {
margin-top: 30px;
background-color: #ddd;
padding: 20px;

ul {
display: flex;
justify-content: flex-end;

li {
  padding: 0 10px;
}

}

span {
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: #444;
}
}

However when I try to recreate this, code pen doesn’t seem to recognize that ‘ul’ and ‘li’ for example are nested within ‘footer’. I’m not sure if nested is the right word here. I’ve even tried copying the code line for line into my own project, to no avail.

#2

Good eye. I’ve also noticed and tried it as well. Doesn’t work.

1 Like
#3

The nesting is SCSS. If you want to use it you can click the settings button up top and go to the CSS tab then from the CSS Preprocessor drop-down select SCSS. But I would not recommend using SCSS until you are familiar with normal CSS. It will just be confusing otherwise. The curriculum has a section on SCSS/SASS you can look at.

Side note: I have suggested we update the project to remove the SCSS because it is confusing a lot of people and SCSS isn’t shown until later, after the responsive projects.

2 Likes
#4

They have used a preprocessor. You will learn about it when you have a good grasp of vanilla CSS, preprocessors like sass, less make your code shorter and better.

#5

Yeah I think that’s a good idea.

#6