Getting Sassy With Sass: Nesting

As I'm learning to use Sass I decided to jot down some of the basics for reference. Most of this is coming from Hampton Catlin's Sass Basics course on Treehouse (referral).

The selectors can be nested for ease of writing and reading. This can help organize code in a way that like selectors are together. It also keeps us from having to repeat strings of selectors. A quick example would be:

.selector1 {
  .selector2 {
    color: red;
  }
}

.selector1 .selector2 {
  color: red;
}

You can even go deeper if you would like. Let's take a look at 4 levels deep (the suggested maximum depth for Sass).

.selector1 {
  .selector2 {
    color: red;
    .box {
      background: blue;
      h1 {
        color: green;
      }
    }
  }
}

.selector1 .selector2 {
  color: red;
}
.selector1 .selector2 .box {
  background: blue;
}
.selector1 .selector2 .box h1 {
  color: green;
}

There is a helper character that makes referencing parent selectors much easier. This character is the ampersand (&) symbol.

.blog {
  > h1 {
    color: red;
    border: 1px solid red;
  }
  .entry {
    h1 {
      font-size: 20px;
      color: blue;
    }
    p {
      font-size: 12px;
      margin: 20px;
      html.csscolumns & {
        column-count: 2;
        column-gap: 10px;
        margin: 10px;
      }
    }
    a {
      color: red;
      &:hover {
        color: blue;
      }
    }
  }
}

.blog > h1 {
  color: red;
  border: 1px solid red;
}
.blog .entry h1 {
  font-size: 20px;
  color: blue;
}
.blog .entry p {
  font-size: 12px;
  margin: 20px;
}
html.csscolumns .blog .entry p {
  column-count: 2;
  column-gap: 10px;
  margin: 10px;
}
.blog .entry a {
  color: red;
}
.blog .entry a:hover {
  color: blue;
}