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

【问题标题】：What is wrong with the "&" in this CSS?这个 CSS 中的“&”有什么问题？
【发布时间】：2015-11-29 16:39:23
【问题描述】：

这个 CSS 在 jsfiddle here 中工作：

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

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

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

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

&::after {

...具体来说，第 5 列（“&”）

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

另一个错误是“Unexpected token '}' at line 19, col 1。}

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

所以我在“&”之前添加了一个“}”并删除了最后一个“}”，但随后又出现了另一个错误：“Unexpected token '&'。”

为什么它在 jsfiddle 中运行良好，但在 csslint 和 Meteor 中却失败了？

【问题讨论】：

一方面，它不是 CSS。是 SCSS。此外，在构建小提琴时，您必须选择 SCSS 作为选项，因为它默认为 CSS，所以不能错过。
那是 LESS，不是 CSS。你需要编译它。
我分叉了一个现有的，将类从 div 移动到 select，并摆脱了 div。

标签： css meteor jsfiddle

【解决方案1】：

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

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

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

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

【讨论】：