Skip to content

Instantly share code, notes, and snippets.

@s10wen
Last active September 22, 2016 15:51
Show Gist options
  • Save s10wen/0318e2cc46074eaae7a70fd27691abb4 to your computer and use it in GitHub Desktop.
Save s10wen/0318e2cc46074eaae7a70fd27691abb4 to your computer and use it in GitHub Desktop.
Sass Nesting using &
  1. Nesting:
.anElement {

  &_aBlock {
    …
  }

  &_anotherBlock {
    …
  }

  &_anotherBlockAgain {

    &:hover {
      …
    }
  }
}
  1. Limiting Nesting to Pseudo Elements:
.anElement {
  …
}

.anElement_aBlock {
  …
}

.anElement_anotherBlock {
  …
}

.anElement_anotherBlockAgain {

  &:hover {
    …
  }
}
@13twelve
Copy link

The ability to search a codebase for a class name is super important.

anElement will be repeated in your output a number of times anyways, so being DRY I'm not sure is really a concern here.

My vote - no nesting except pseudo selectors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment