sass родитель родительской специфики

Я пишу CSS в стиле БЭМ и имею такой код:

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

Как получить .nav .nav__link--active и .nav__link.nav__link--active из кода выше? Как я могу повысить специфичность с помощью этого метода?


sass bem
person sikwel    schedule 13.02.2015    source источник
comment
Я не уверен, почему вы используете каскад для .nav .nav__link--active и комбинируете .nav__link с .nav__link--active. Если вы отбросите .nav и .nav__link, все будет в порядке, специфичность будет равна 1, и вам нужно просто отсортировать селекторы в правильном порядке. Не переусердствуйте ;-)   -  person Alex Yaroshevich    schedule 02.05.2015

Ответы (1)


arrow_upward
4
arrow_downward

Для этого не существует волшебного метода. Сохраните нужный селектор как переменную и вложите его, как обычно.

.nav {
  $sel: &;
    &__list {
      &__item {
        color: red;
        #{$sel} & {
          border: 1px solid;
        }
      }    
    }
  &__link {
    &--active {
      color: blue;
      #{$sel} & {
        border: 1px dashed;
      }
    }
  }
}
person cimmanon    schedule 13.02.2015
comment
Хороший совет для пользователей SASS! ;-) Но, пожалуйста, не используйте block__elem__elem. Этот тип селекторов является анти-паттерном. - person Alex Yaroshevich; 02.05.2015