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).

Nesting Selectors

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:

Sass:

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

CSS Output:

.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).

Sass:

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

CSS Output:

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

Using the & Symbol

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

Sass:

.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;
      }
    }
  }
}

CSS Output:

.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;
}