像父母使用SASS一样在LESS中使用BEM

问题描述

我试图基于BEM修饰符引用基类以更改子类。

这在SASS中效果很好，但是我现在正在使用LESS。

这里有SASS参考... https://css-tricks.com/the-sass-ampersand/

这是无效的代码...

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

解决方法

在 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 {
    
  }
}

bem less