Confusion Regarding SCSS Nesting


#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-sass/projects/refactor-scss

<In what way does your code behave incorrectly? Include ALL error messages.>
I’ve already submitted a bug report because the editor keeps identifying the $ and ; as “unexpected tokens” in my variable definitions (and the $ is marked as unexpected again when I insert the variable as a value). However, my main question/confusion is concerning nesting variables in this project. The instructions say in Step 3 to nest .nav and .main inside .container but why? In the lesson, nesting indicated the selectors were chained, but as you can see from the CSS code, the .nav and .main are not chained (if they were, they would appear as .container .nav and .container .main respectively in the CSS code). I thought the only selectors that would be nested would be:

h4 nested within .nav

and

ul, li, h1, video, p, a, and a:hover all nested within .main

html, body {
  margin: 0;
  font-family: Arial;
  color: #ffffff;
}

p, a {
  font-size: 0.75rem;
}

img {
  padding-left: 30px;
  height: 350px;
  width: 550px;
}

ul {
  list-style: none;
}

.container {
  min-height: 100%;
  display: flex;
}

.nav {
  width: 15%;
  min-width: 140px;
  color: #FFCFCF;
  padding-top: 55px;
  padding-right: 30px;
  text-align: center;
}

.nav h4 {
  -webkit-margin-before: 0;
  margin-left: 50px;
}

.main ul {
  padding-left: 30px;
}

.main li {
  font-size: 0.85rem;
}

.main {
  width: 85%;
  min-height: 750px;
  min-width: 600px;
  background-color: #FFCFCF;
}

.main h1 {
  font-size: 62px;
  -webkit-margin-before: 0;
  padding-top: 40px;
  padding-left: 30px;
}

.main video {
  padding-left: 30px;
}

.main p {
  padding-left: 30px;
  width: 55%;
  min-width: 550px;
}

.main a {
  color: inherit;
  padding-left: 30px;
  text-decoration: none;
}

.main a:hover {
  text-decoration: underline;
}

#2

It looks like .nav is not nested in .container since the compiled CSS does not have a .container .nav selector. LIkewise, the H4 must not be nested in the .nav since the compiled CSS does not have a .container .nav h4 selector.


#3

Well, that’s the CSS code at the start of the lesson (not compiled from SCSS). My understanding was that the goal of the lesson was to get you to convert that CSS to SCSS using variables and nesting. So that’s where my question came in. If the CSS does not have the chained .container .nav and .container .main selectors, why are they asking you to nest .nav and .main under .container in the SCSS code?


#4

Yes, so that it compiles to descendant selectors in the CSS.


#5

But that would compile to a different CSS code than what you started with. The original CSS code does not have the chained selectors .container .nav and .container .main. If you nest .nav and .main under .container, the compiled CSS will have those chained selectors in it.


#6

Sorry, I don’t follow your question. Please post your SCSS.


#7

Sure. The following is the SCSS code they want you to write according to the instructions. My point is that the following SCSS will not compile to a carbon copy of the original CSS that they gave you (see my original post for that code). In order for it to compile to a carbon copy of the original CSS, you would need to write it like the second SCSS code, with nothing nested under .container. I’m leaving out the variables here, as I am only confused about the nesting.

SCSS CODE PER INSTRUCTIONS:

html, body {
margin: 0;
font-family: Arial;
color: #ffffff;
}

p, a {
font-size: 0.75rem;
}

img {
padding-left: 30px;
height: 350px;
width: 550px;
}

ul {
list-style: none;
}

.container {
min-height: 100%;
display: flex;

  .nav {
      width: 15%;
      min-width: 140px;
      color: #FFCFCF;
      padding-top: 55px;
      padding-right: 30px;
      text-align: center;

      h4 {
         -webkit-margin-before: 0;
         margin-left: 50px;
        }
    }

    .main {
      width: 85%;
      min-height: 750px;
      min-width: 600px;
      background-color: #FFCFCF;
        
        ul {
        padding-left: 30px;
        }

        li {
        font-size: 0.85rem;
        }

        h1 {
        font-size: 62px;
        -webkit-margin-before: 0;
        padding-top: 40px;
        padding-left: 30px;
        }

        video {
        padding-left: 30px;
        }

        p {
        padding-left: 30px;
        width: 55%;
        min-width: 550px;
        }

        a {
        color: inherit;
        padding-left: 30px;
        text-decoration: none;
        }

        a:hover {
        text-decoration: underline;
        }
    }
}

SCSS CODE THAT RECREATES THE ORIGINAL CSS EXACTLY:

html, body {
margin: 0;
font-family: Arial;
color: #ffffff;
}

p, a {
font-size: 0.75rem;
}

img {
padding-left: 30px;
height: 350px;
width: 550px;
}

ul {
list-style: none;
}

.container {
min-height: 100%;
display: flex;
}

.nav {
width: 15%;
min-width: 140px;
color: #FFCFCF;
padding-top: 55px;
padding-right: 30px;
text-align: center;

  h4 {
    -webkit-margin-before: 0;
    margin-left: 50px;
  }
}

.main {
width: 85%;
min-height: 750px;
min-width: 600px;
background-color: #FFCFCF;

    ul {
    padding-left: 30px;
    }

    li {
    font-size: 0.85rem;
    }

    h1 {
    font-size: 62px;
    -webkit-margin-before: 0;
    padding-top: 40px;
    padding-left: 30px;
    }

    video {
    padding-left: 30px;
    }

    p {
    padding-left: 30px;
    width: 55%;
    min-width: 550px;
    }

    a {
    color: inherit;
    padding-left: 30px;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }
}


#8

That should just be h4. It is nested in .nav.

All of the .main nesting is incorrect.


#9

Sorry, I was copying/pasting/indenting in a hurry and forgot to cut the parent selectors out after nesting. Fixed. But my question still remains. Why are they instructing you to do it the first way I showed instead of the second? Only the second way is actually converting the original CSS code exactly to SCSS. The first way does not.


#10

I am still confused about the question. As for why, that is something you would have to ask the author. We are not privy to the thoughts or discussions that took place when this course was introduced.


#11

I’m not sure how to ask it any clearer. Do you not agree that the two examples of SCSS code I posted above will produce different CSS code when compiled, only one of which matches the original CSS (the code in my original post)? My question was why they would have you write SCSS code that does not match the CSS code. I wasn’t asking people to read the author’s mind for me, but hoping someone might chime in to tell me where I’m off in my understanding, if I am.

The exercises seems to confuse the hierarchy of the structure (the html, in which nav and main classes are children of the container class) with the hierarchy of the styling (the CSS, in which the nav and main class selectors are not chained to the container selector, which means the SCSS code should not have them nested.


#12

I’m going to defer to someone else who might have a better fix on the point you are trying to make. You have completely lost me. I have the correct code that passed this exercise when I did it last year, and yours does not look anything like it. That’s my point. Stepping aside…


#13

Ok, but it would sure be helpful if you posted your code then. That would probably help me to see where we’re diverging in our thinking here! I have no idea how your code could not look “anything” like mine (if you’re referring to my first SCSS example), since I followed the instructions explicitly, so I’m very curious as to what you ended up with.

P.S. The linked “exercise” is a freeform project. All you do is manually check off the steps–there’s no “pass” like on the lessons. Someone could have it wrong and still have it marked “complete.” No idea why they made the freeform projects that way, since the lessons ensure the code is correct before allowing one to proceed. To make matters worse, the editor is bugging out on all my browsers (FireFox, Chrome, and Safari), marking things as syntax errors that aren’t. The editor in the lessons did not behave this way.


#14

SCSS

$white: #ffffff;
$mauve: #FFCFCF;

html, body {
  margin: 0;
  font-family: Arial;
  color: $white;
}

p, a {
  font-size: 0.75rem;
}

img {
  padding-left: 30px;
  height: 350px;
  width: 550px;
}

ul {
  list-style: none;
}

.container {
  min-height: 100%;
  display: flex;
  .nav {
    width: 15%;
    min-width: 140px;
    color: #FFCFCF;
    padding-top: 55px;
    padding-right: 30px;
    text-align: center;
    h4 {
      -webkit-margin-before: 0;
      margin-left: 50px;
    }
  }
  .main {
    width: 85%;
    min-height: 750px;
    min-width: 600px;
    background-color: #FFCFCF;
    ul {
      li {
        font-size: 0.85rem;
      }
    }    
    h1 {
      font-size: 62px;
      -webkit-margin-before: 0;
      padding-top: 40px;
    }
    video {
    }
    p {
      width: 55%;
      min-width: 550px;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
      
    > * {
      padding-left: 30px;
    }
  }
}

Compiled CSS

html, body {
  margin: 0;
  font-family: Arial;
  color: #ffffff;
}

p, a {
  font-size: 0.75rem;
}

img {
  padding-left: 30px;
  height: 350px;
  width: 550px;
}

ul {
  list-style: none;
}

.container {
  min-height: 100%;
  display: flex;
}

.container .nav {
  width: 15%;
  min-width: 140px;
  color: #FFCFCF;
  padding-top: 55px;
  padding-right: 30px;
  text-align: center;
}

.container .nav h4 {
  -webkit-margin-before: 0;
  margin-left: 50px;
}

.container .main {
  width: 85%;
  min-height: 750px;
  min-width: 600px;
  background-color: #FFCFCF;
}

.container .main ul li {
  font-size: 0.85rem;
}

.container .main h1 {
  font-size: 62px;
  -webkit-margin-before: 0;
  padding-top: 40px;
}

.container .main p {
  width: 55%;
  min-width: 550px;
}

.container .main a {
  color: inherit;
  text-decoration: none;
}

.container .main a:hover {
  text-decoration: underline;
}

.container .main > * {
  padding-left: 30px;
}


#15

Many thanks! Your code is actually pretty much the same as mine except you nested li under ul. And as can be seen from your compiled CSS, it is different than the CSS the project started out with. That’s what I was puzzled by, since I thought the point was to replicate the same CSS but in the more efficient SCSS coding.


#16

Before I get over-confident, my code could be completely wrong. My brain seems to have gone sideways today… Might be I have to redo the exercise and see what result I get this time. SCSS is something I do not work with and I only did that unit to test for bugs when it was first published. Pardon me for possibly misleading you.


#17

No worries. Thanks for your time.


#18

Step 2:

$white: #FFFFFF;
$mauve: #FFCFCF;

The first can be applied in the body rule. The second in the nav and main rules.

Step 3:

nest direct child selectors
.container {
  min-height: 100%;
  display: flex;
  .nav {
    width: 15%;
    min-width: 140px;
    color: $mauve;
    padding-top: 55px;
    padding-right: 30px;
    text-align: center;
  }
  .main {
    width: 85%;
    min-height: 750px;
    min-width: 600px;
    background-color: $mauve;
  }
}

First child selectors nested in common parent selector rule.

Step 4:

nest to nav
.container {
  min-height: 100%;
  display: flex;
  .nav {
    width: 15%;
    min-width: 140px;
    color: $mauve;
    padding-top: 55px;
    padding-right: 30px;
    text-align: center;
    h4 {
      -webkit-margin-before: 0;
      margin-left: 50px;
    }
  }
  .main {
    width: 85%;
    min-height: 750px;
    min-width: 600px;
    background-color: $mauve;
  }
}

There is only one selector rule associated with .nav, the H4.

Going forward I need to confirm that I have the same HTML you have.

index.html
<html>
  <head>
    <title>Common Cents Party</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    <div class="container">
      <div class="nav">
        <h4>Common Cents Party</h4>
        <ul>
          <li>Home</li>
          <li>Shows</li>
          <li>Albums</li>
          <li>Gallery</li>
          <li>Bio</li>
          <li>Blog</li>
        </ul>
      </div>
      <div class="main">
        <h1>Common Cents Party</h1>
        <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/band.jpg"/>
        <p>
          "Common Cents Party, a hard-hitting acoustic punk/electronic four-piece from Atlanta, Georgia, combines an unleashed live performance with edgy lyrics, unforgettable hooks and well-studied synth-rock sounds. A must-see, must-hear new band." -Screech Magazine
        </p>
        <a href="shows.html">Click here for a list of upcoming shows</a>

      </div>
    </div>
  </body>
</html>
shows.html
<!DOCTYPE html>
<html>
  <head>
    <title>Common Cents Party</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    <div class="container">
      <div class="nav">
        <h4>Common Cents Party</h4>
        <ul>
          <li>Home</li>
          <li>Shows</li>
          <li>Albums</li>
          <li>Gallery</li>
          <li>Bio</li>
          <li>Blog</li>
        </ul>
      </div>
      <div class="main">
        <h1>Upcoming Shows</h1>
        <video width="550px" height="350px" controls>
          <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/liveshow.mp4" type="video/mp4">
        </video>
        <ul>
          <li>Tokyo, Japan - January 26th, 2016</li>
          <li>Seoul, Republic of Korea - January 28th, 2016</li>
          <li>Singapore, Singapore - January 30th, 2016</li>
          <li>London, United Kingdom - March 5th, 2016</li>
          <li>London, United Kingdom - March 7th, 2016</li>
          <li>London, United Kingdom - March 8th, 2016</li>
          <li>London, United Kingdom - March 9th, 2016</li>
          <li>Manchester, United Kingdom - March 13th, 2016</li>
          <li>Glasgow, United Kingdom - March 14th, 2016</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Step 5:

nest to main
.container {
  min-height: 100%;
  display: flex;
  .nav {
    width: 15%;
    min-width: 140px;
    color: $mauve;
    padding-top: 55px;
    padding-right: 30px;
    text-align: center;
    h4 {
      -webkit-margin-before: 0;
      margin-left: 50px;
    }
  }
  .main {
    width: 85%;
    min-height: 750px;
    min-width: 600px;
    background-color: $mauve;
    h1 {
      font-size: 62px;
      -webkit-margin-before: 0;
      padding-top: 40px;
      padding-left: 30px;
    }
    ul {
      padding-left: 30px;
    }
    li {
      font-size: 0.85rem;
    }
    p {
      padding-left: 30px;
      width: 55%;
      min-width: 550px;
    }
    a {
      color: inherit;
      padding-left: 30px;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    video {
      padding-left: 30px;
    }
  }
}

You’ll notice that the LI is not nested in the UL. Not sure what was going through my mind a year or more ago. Answer: the next step. D’oh!

Step 6:

nest descendants
.container {
  min-height: 100%;
  display: flex;
  .nav {
    width: 15%;
    min-width: 140px;
    color: $mauve;
    padding-top: 55px;
    padding-right: 30px;
    text-align: center;
    h4 {
      -webkit-margin-before: 0;
      margin-left: 50px;
    }
    ul {
      /* TBA */
      li {
      /* TBA */
      }
    }
  }
  .main {
    width: 85%;
    min-height: 750px;
    min-width: 600px;
    background-color: $mauve;
    h1 {
      font-size: 62px;
      -webkit-margin-before: 0;
      padding-top: 40px;
      padding-left: 30px;
    }
    ul {
      padding-left: 30px;
      li {
        font-size: 0.85rem;
      }
    }
    p {
      padding-left: 30px;
      width: 55%;
      min-width: 550px;
    }
    a {
      color: inherit;
      padding-left: 30px;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    video {
      padding-left: 30px;
    }
  }
}

#19

Your understanding of the instructions coincides with mine, and that is the same HTML that I see as well.


#20

Good to know. Whew!

Step 7:

universal selector rule
.container {
  min-height: 100%;
  display: flex;
  .nav {
    width: 15%;
    min-width: 140px;
    color: $mauve;
    padding-top: 55px;
    padding-right: 30px;
    text-align: center;
    h4 {
      -webkit-margin-before: 0;
      margin-left: 50px;
    }
    ul {
      /* TBA */
      li {
      /* TBA */
      }
    }
  }
  .main {
    width: 85%;
    min-height: 750px;
    min-width: 600px;
    background-color: $mauve;
    h1 {
      font-size: 62px;
      -webkit-margin-before: 0;
      padding-top: 40px;
      /* padding rule */
    }
    ul {
      /* padding rule */
      li {
        font-size: 0.85rem;
      }
    }
    p {
      /* padding rule */
      width: 55%;
      min-width: 550px;
    }
    a {
      color: inherit;
      /* padding rule */
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    video {
      /* padding rule */
    }
    > * {
      padding-left: 30px;
    }
  }
}

Once comments are removed, how does this compare to my earlier code? Pretty sure all the instructions have been followed.