时间戳

首页 > 解决方案 > scss如何在css类名中使用@

css - scss如何在css类名中使用@

问题描述

我使用 gridle scss 作为轻量级响应式网格系统，当我构建它时，它会创建类似的类gr-6@mobile

所以我试图想出我自己的移动课程：

.align-right {
  text-align: right;

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

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

还尝试了以下方法，但它们也不起作用：

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

标签： csssass

解决方案

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

.align-right {
  text-align: right;

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

这将编译为：

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

您的文件中的反斜杠.css是预期的，并且会在您的浏览器中很好地呈现。

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

推荐阅读