这个CSS中的“&”有什么问题？

Question

这个 CSS 在 jsfiddle 中有效 here:

.select-wrapper {
    position: relative;
    width: 200px;
    overflow: hidden;
    border: 1px solid #ccc;

    &::after {
        content: "93";
        position: absolute;
        right: 5px;
        top: 0;
    }

    select {
        background: transparent;
        border: 0;
        padding: 3px;
    }
}

...但是在将它添加到我的 .css 文件后尝试运行我的流星应用程序，它失败了，说这行有问题：

&::after {

...具体而言，第 5 列（“&”）

我将它粘贴到 csslint.net，它告诉我 CSS 包含两个错误。在上面显示的行中，它说，“Expected RBRACE”

另一个错误是第 19 行第 1 列的“意外标记'}'。}

这是 CSS 的最后一个“}”（也是最后一个标记）。

所以我在“&”之前添加了一个“}”并删除了最后一个“}”，但随后又出现了另一个错误：“意外标记'&'”。 =14=]

为什么它运行在 jsfiddle 中正常但在 csslint 和 Meteor 中失败？

Answer 1

即SCSS即SASS。在 sassmeister 转换回 CSS。你会得到类似...

.select-wrapper {
  position: relative;
  width: 200px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.select-wrapper::after {
  content: "93";
  position: absolute;
  right: 5px;
  top: 0;
}

.select-wrapper select {
  background: transparent;
  border: 0;
  padding: 3px;
}

这个CSS中的“&”有什么问题？

What is wrong with the "&" in this CSS?

css

jsfiddle

meteor