Css 使用转义字符将值从mixin传递到类

我有一个贴图生成器，可以添加后期粒子：

@mixin generator {
  @each $key, $value in $config {
        $infix: '\@#{$key}' !global;
        @content
      }
    }

我在多种情况下使用上面的mixin在末尾添加粒子，如：

.y- {
  @include generator {
    &-n#{$infix} {
      display: none !important;
    }
    &-in#{$infix} {
      display: inline !important;
    }
  }
}

我得到以下错误：

“&-none”后的CSS无效：应为选择器，为“@”\n

我想要的是：

.y-n@key_name1{
    display: none !important;
}

.y-n@key_name2{
        display: none !important;
    }

仅当我输入us

\@

时，此选项才会出现

我可以在创建类时将它添加到这个粒子中，但正如我所说的，我想在多种情况下使用它，并根据条件改变粒子，所以我需要处于mixin状态。

这样就可以了

$config: (
  1: 'a',
  2: 'b',
  3: 'c'
);

@mixin generator {
  @each $key, $value in $config {
        $infix: '-#{$key}' !global;
        @content
      }
    }

.y- {
  @include generator {
    &-n#{$infix} {
      display: none !important;
    }
    &-in#{$infix} {
      display: inline !important;
    }
  }
} 

看到这个萨斯密斯特了吗

但是一旦你加上

\@

..对于

$infix

变量键字符串，它会抛出一个错误

$infix: '\@#{$key}' !global;

我认为是

\@

打破了你的sass/css

若你们看到问题，你们只能用

@

符号来表示（示例）

---

也许扔掉

\@

你的sass就能正常运行了？

我可以帮你，但是你正在调用

@include utility\u generator

，但是你的

@mixin

被称为

generator

？你是故意在循环吗？这些都是打字错误。谢谢，编辑过，只是复制粘贴错误，名称应该是相同的。是的，我故意运行一个循环；我想在一个类名的末尾添加多个“字符串”，我和你在一起。你想运行一个数组并在类中输出密钥，给我几分钟。它不起作用，问题是特殊字符。如果我更改代码：$infix:'\@'，将出现类似于我的代码中的错误；我需要告诉sass一些事情，不要将其解释/解析为stringSee更新的答案，尽管它的回答很好。我只是确信@content可以传递变量。从逻辑上说，你认为这是允许的。只是修复了我所有的打字错误。对不起，问题不在于我的混音，而在于@符号。我找到的解决办法是使用\\@；我正在测试使用@来定义一个媒体查询类，比如col-7@sm

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}