Nesting Selectors in Sass

Sass allows you to easily nest your selectors and organize your rules hierarchically:

.main {
  background-color: antiquewhite;
  margin: 0 auto;

  img {
    max-width: 100%;
    transform: rotate(3deg);
  }
  p:first-child {
    font-size: 1.2em;
span {
  background-color: burlywood;
  padding: 0.2em 0.4em;
}

The above, once compiled to CSS, would yield the following:

.main {
  background-color: antiquewhite;
  margin: 0 auto;
}
.main img {
  max-width: 100%;
  transform: rotate(3deg);
}
.main p:first-child {
  font-size: 1.2em;
}
.main p:first-child span {
  background-color: burlywood;
  padding: 0.2em 0.4em;
}

.main {
  margin: 0 auto;

.main {
  margin: 0 auto;
  background-color: antiquewhite;
  background-image: url(images/gator.svg);
  background-repeat: repeat-x;
  background-size: 36px 48px;
}