使用＆嵌入伪元素

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文件中编写代码。