[Sass] Level 1: Foundation --EX

COMMENTS I

With the addition of Sass to our project, we know .surveyor h2 and .surveyor h2 a can be simplified with nesting, but we don't have the time to refactor it just yet. Leave a comment that won't be output to our compiled CSS reminding us to fix this later.

.surveyor {
  border: 1px solid #ccc;
  padding: 20px;
}
.surveyor h2 {
  font-size: 18px;
}
.surveyor h2 a {
  color: green;
}

Answer:

.surveyor {
  border: 1px solid #ccc;
  padding: 20px;
}
.surveyor h2 {
  font-size: 18px;
}


// .surveyor h2 a should be nested 
// into .surveyor h2

.surveyor h2 a {
  color: green;
}

 

COMMENTS II

Our document has a few remaining CSS-style comments for organization. Since these comments are only useful to us, let's alter them so they aren't output after compiling.

/* Headers */
    
h1 {
  font-size: 24px;
  font-weight: bold;
}
h2 {
  font-size: 18px;
}

/* Lists */

ol {
  list-style: decimal;
}
ul {
  list-style: disc;
}

Answer:

// Headers   
h1 {
  font-size: 24px;
  font-weight: bold;
}
h2 {
  font-size: 18px;
}

// Lists
ol {
  list-style: decimal;
}
ul {
  list-style: disc;
}

 

IMPORTS

To modularize our styles, we've separated some out to a partial called _settings.scss. Import the settings partial into application.scss, remembering that the underscore and file extension aren't necessary with Sass imports.

@import "settings";

h1 {
  color: $color-base;
}

 

NESTING

With the comments out of the way, now it's time to refactor the .surveyor class to take advantage of nesting.

.surveyor {
  border: 1px solid #ccc;
  padding: 20px;
}
.surveyor h2 {
  font-size: 18px;
}
.surveyor h2 a {
  color: green;
}

Answer:

.surveyor {
  border: 1px solid #ccc;
  padding: 20px;
  h2 {
      font-size: 18px;
      a {
          color: green;
        }
    }
}

 

PARENT SELECTOR I

We've noticed an issue with our .notice class - we need to nest the .alert class inside in a way that will produce .notice.alert rather than .notice .alert. Refactor the class below with the parent selector.

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
}
.notice.alert {
  background: red;
  box-shadow: 0 0 10px red;
}

Answer:

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
  &.alert {
      background: red;
      box-shadow: 0 0 10px red;
    }
}

 

PARENT SELECTOR II

Now that we have the parent selector, let's use it to add a :hover state to .notice a with a color: #313131; property. While we're at it, we should nest a inside of .notice properly.

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
}
.notice a {
  color: #222;
}

Answer:

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
   a {
    color: #222;
    &:hover{
      color: #313131;  
    }
  }  
}

 

PARENT SELECTOR III

We've found a change to .surveyor further on in our stylesheet - it needs a bit more padding inside .factory containers. We'd be better off nesting this change inside .surveyor.

.surveyor {
  border: 1px solid #ccc;
  padding: 20px;
}
.factory .surveyor {
  padding: 30px;
}

Answer:

.surveyor {
  border: 1px solid #ccc;
  padding: 20px;
  .factory &{
      padding: 30px;  
  }
}

 

NESTING PITFALLS

Someone was a bit overzealous in their nesting: the a styles should apply to any anchors in.notice rather than anchors in .notice.alert. Adjust the nesting below to compensate.

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
  &.alert {
    background: red;
    box-shadow: 0 0 10px red;
    a {
      color: #222;
      &:hover {
        color: #313131;
      }
    }
  }
}

Answer:

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
  &.alert {
    background: red;
    box-shadow: 0 0 10px red;
  }
   a{
     color: #222;
     &:hover {
       color: #313131;
     }
   }
}