0

I write CSS in BEM style and have this code:

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

How do I get .nav .nav__link--active and .nav__link.nav__link--active from code above? How can I enhance the specificity by this method?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
sikwel
  • 1
  • 2
  • I'm not sure why you using cascade for `.nav .nav__link--active` and combining `.nav__link` with `.nav__link--active`. If you drop `.nav` and and `.nav__link` all be fine, the specificity will be 1, and you should just sort your selectors in the right order. Don't overextend ;-) – Alex Yaroshevich May 02 '15 at 12:26

1 Answers1

4

There is no magic method for this. Store the desired selector as a variable and nest like normal.

.nav {
  $sel: &;
    &__list {
      &__item {
        color: red;
        #{$sel} & {
          border: 1px solid;
        }
      }    
    }
  &__link {
    &--active {
      color: blue;
      #{$sel} & {
        border: 1px dashed;
      }
    }
  }
}
cimmanon
  • 67,211
  • 17
  • 165
  • 171