Sass parent parent specific

Question

Sass parent parent specific

I am writing CSS in BEM style and have this code:

.nav {
    &__list {
      &__item {
      }    
    }
  &__link {
    &--active { 
    }
  }
}

How do I get to .nav .nav__link--active

and .nav__link.nav__link--active

from the code above? How can I increase the specificity with this method?

0

sass bem

sikwel 13 Feb 15 at 11:50

source to share

1 answer

cimmanon · Answer 1 · 2015-02-13T12:01:15+0000

There is no magic method for this. Save the desired selector as a variable and socket as usual.

.nav {
  $sel: &;
    &__list {
      &__item {
        color: red;
        #{$sel} & {
          border: 1px solid;
        }
      }    
    }
  &__link {
    &--active {
      color: blue;
      #{$sel} & {
        border: 1px dashed;
      }
    }
  }
}

Sass parent parent specific

More articles: