如何在SCSS中为元素添加“已修改”类

Question

鉴于此scss

.root {

  color: red;

  &-child {
    color: blue;

    small & {
      font-size: 80%;
    }

  }

}

这是我得到的CSS：

.root {
  color: red;
}
.root-child {
  color: blue;
}
small .root-child {
  font-size: 80%;
}

我想在.root-child上对small进行不同的设置，因此我需要的规则是：

small.root-child {
  font-size: 80%;
}

（注意small之后没有空格）

我该怎么做？

Answer 1

您需要使用@at-root，这将删除选择器中的空白区域，并且它将是一个有效的语法，因此在您尝试编译时没有问题。

.root {
  color: red;

  &-child {
    color: blue;

    @at-root small#{&} {
      font-size: 80%;
    }
  }
}

Answer 2

您可以像这样使用@at-root：

<强> SCSS

.root {

  color: red;

  &-child {
    color: blue;

      @at-root {
        small#{&} {
             font-size: 80%;
        }
      }

  }

}

<强>编译：

.root {
  color: red;
}
.root-child {
  color: blue;
}
small.root-child {
  font-size: 80%;
}