Confusion Regarding SCSS Nesting

#21

I need to re-read the first Sass lesson and revisit this tomorrow. My head is spinning with all this nesting, sub-nesting, sub-sub nesting, etc. Something doesn’t seem right here. Sass is supposed to make things simpler, not more complicated. Maybe I missed a point in the lesson that’s causing me not to connect the dots with this freeform project. I’ll reply again tomorrow. Thanks!

P.S. Is the code editor showing a ton of syntax errors for you too? That doesn’t help my focus, seeing all those red blocks. For instance, after a few minutes, all of a sudden it decides it doesn’t like the $ sign in the variables and marks all those as unexpected. Does the same thing with many curly braces within the nested selectors. This happens on FireFox, Chrome, and Safari.

#22

The editor linter does not recognize the SCSS so is flagging a lot of rules. Ignore the ones that appear on syntax you believe to be correct.

1 Like
#23

Ok, I think I finally got it. I went through the lesson and quiz again and then re-did the project. Here is the SCSS I ended up with. Nothing changed on the web page throughout the steps (after clicking “Save” each time, of course) all the way through the end, so that’s a good sign, since the point was simply to convert the CSS to SCSS without any style changes.

$white: #FFFFFF;
$rose: #FFCFCF;

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

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

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

.container {
  min-height: 100%;
  display: flex;
  .nav {
    width: 15%;
    min-width: 140px;
    color: $rose;
    padding-top: 55px;
    padding-right: 30px;
    text-align: center;
    h4 {
      -webkit-margin-before: 0;
      margin-left: 50px;
    }
    ul {
      list-style: none;
    }
  }
  .main {
    width: 85%;
    min-height: 750px;
    min-width: 600px;
    background-color: $rose;
    > * {
      padding-left: 30px;
    }
    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;
    }
    ul {
      li {
        font-size: 0.85rem;
      }
    }
  }
}
#24

That should be a generic type rule so both classes inherit the property. The bullets should be turned off globally.

Since there is no styling in the nav list beyond what it inherits, we technically don’t need a UL nested. I did it above for future purposes. In the project I have only the H4.

1 Like
closed #25

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.