Last Updated: February 25, 2016
·
480
· naxoc

Target the parent from nested SCSS selectors

It very quickly gets messy to target Modernizr classes in code without using the ampersand after the selector to target classes up the hierarchy from nested selectors.

Here is an example:

some-div {
  .special-list {
    .extra-special-link {
      color: #000000;
      .no-cssgradients & {
        color: red;
      }
    }
  }
}

Will compile to:

some-div .special-list .extra-special-link {
  color: #000000;
}
.no-cssgradients some-div .special-list .extra-special-link {
  color: red;
}

Here is a blog post I wrote about it: http://naxoc.net