Использование БЭМ в LESS как SASS с использованием родителей

Я пытаюсь изменить базовый класс, чтобы изменить подкласс на основе модификатора БЭМ.

Это хорошо работает в SASS, но сейчас я работаю с LESS.

Вот ссылка на SASS... https://css-tricks.com/the-sass-ampersand/

И вот код, который не работает...

.s-body {
  @self: &;
  ...
  &__door {
    ...
    &--state-past {
      #{@self}__image {
          ...
      }
    }
  }
  &__image {
    ...
  }
}

less bem
person Stephen Brown    schedule 23.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В LESS невозможно присвоить текущий класс переменной с помощью амперсанда (&). Но вы можете установить имя класса как переменную следующим образом:

.s-body {
  @self: .s-body;
}

После этого вы можете использовать переменную в качестве селектора вот так: @{self}. Дополнительные пояснения см. в документации LESS: http://lesscss.org/features/#variables-feature-variable-interpolation

В вашем примере это приведет к следующему коду:

.s-body {
  @self: .s-body;
  
  &__door {
    
    &--state-past {
      @{self}__image {
          
      }
    }
  }
  &__image {
    
  }
}
person mikesteeghs    schedule 12.02.2021