如何在css类名中使用@

我使用gridle scss作为轻量级响应网格系统，当我构建它时，它会创建类似

gr的类-6@mobile

所以我试着设计我自己的手机类：

。右对齐{
文本对齐：右对齐；
@包括网格状态（移动）{
&@流动的{
文本对齐：右对齐；
}
}
}

但这并没有建立，所以我只是想知道如何在类名中使用

@

还尝试了以下操作，但也不起作用：

&#{@mobile} {}          // wrapping it in #{}
.align-right@mobile {}  // putting it all in one line didn't like it either

---

要使用特殊字符，可以对其进行转义。
对于您的特定问题，您应该写：

.align-right {
  text-align: right;

  @include gridle-state(mobile) {
    &\@mobile {
      text-align: right;
    }
  }
}

这将编译为：

.align-right\@mobile {...}

.css

文件中的反斜杠是预期的，并且在浏览器中可以很好地呈现

---

要了解有关在sass中转义字符的更多信息，您可以检查。

您可以转义它：

&\@mobile{…}

。如果反斜杠仍然存在于css输出中，请不要感到惊讶，这是正常的，而且效果很好。啊，我想这会很简单。如果你补充一个答案，我可以接受。谢谢，我很高兴能帮上忙！谢谢，你忘了在答案中加反斜杠，所以我才加了它