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

Question

我有一个地图生成器，它添加了一个 post 粒子：

@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;
    }
  }
}

我收到以下错误：

Invalid CSS after "&-none": expected selector, was "@"\n

我想要的是：

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

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

只有当我使用 \@ 时才会出现。

我可以在创建 class 时添加这个粒子，但正如我所说，我想在多种情况下使用它并根据条件改变粒子，所以我需要混合。

Answer 1

所以这有效...

$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;
    }
  }
}

看到这个sass大师https://www.sassmeister.com/gist/324c3c0003a91eb676b00dfe1877cae0

但是一旦你添加..

\@

..到你的 $infix 变量键字符串，它会抛出一个错误！

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

我认为是 \@ 破坏了您的 sass/css。

如果您看到 What is the purpose of the '@' symbol in CSS? 问题，您只能将 @ 符号用于（示例）...

/* 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);
}

也许放弃 \@ 你的 sass 会运行好吗？

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

Passing value from a mixin to a class, using escaped characters

css

sass

scss-mixins