父级，＆amp;，插入css属性

Question

我有以下代码：

  &__menu {
    float: left;
    list-style: none none;
    padding: $navbar-menu_padding;
    [class^=#{&}__item] { 
    ....
}

我正在尝试插入& - [class^=#{&}__item]。

无论是否插值，都会失败。

除了写出班级的全名外，还有另一种选择吗？

Answer 1

您可以将父类名称存储到变量中。

SCSS：

.block {
  $this: &; // Variable

  &__item {
    color: red;
  }

  &:hover {
    // Using variable instead of full class name
    #{$this}__item {
      color: green;
    } 
  }
}

Css输出：

.block__item {
  color: red;
}

.block:hover .block__item {
  color: green;
}