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

用＆嵌入类中的伪元素

1 个答案: