css - 使用 & 在类中嵌入伪元素

Question

我正在使用 CSS/JS 构建一个旋钮，我在一个示例中偶然发现了一个 CSS 语法，我想在我的代码中重现它，但它似乎不起作用。我也尝试强制使用不同的 z-index 但没有成功。

这是有效的:

.knob 
{
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: gray;
  transform: rotate(0deg);
}

.knob:before
{
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  left: 44px; top: 12px;
  border-radius: 50%;
  background: white;
}

这就是我想要做的:

.knob 
{
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: gray;
  transform: rotate(0deg);

  &:before
  {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    left: 44px; top: 12px;
    border-radius: 50%;
    background: white;
  }
}

我相信它应该有相同的结果，但作为一个诚实的 CSS 新手，我不明白这是怎么回事。 Here's a CodePen with the full code.

Answer 1

该语法是SCSS 语法。你不能在你的 css 文件中写这样的代码。您可以设置从 SCSS 到 CSS 的编译，并将您的代码写入您的 SCSS 文件。