Question

我正在尝试建立一个循环，它将为我定义的每个断点创建一组类，使用我设置的另一个循环。这些是BP的

$mobileMedium : 480px;
$tabletVertical : 768px;
$desktopNormal : 1024px;
$desktopWide : 1200px;

这是我的scss。

   @each $bpName in "mobileMedium", "tabletVertical", "desktopNormal", "desktopWide"{
        @include breakpoint($$bpName) {
        @include generate("$bpName", "Container", "width");
        }
   }

我希望这样的事情（例子）：

@media (min-width: 768px) {
  .tabletVerticalContainer-1_12 {
    width: 8.33333%;
  }

但这就是终点站的回报：

error sass/screen.scss (Line 36 of sass/_grid.scss: 
Invalid CSS after "...ude breakpoint(": expected ")", was "$$bpName) {")

我想这可以归结为我如何将两个文本（'$'）和变量组合在一起。

有什么想法吗？

Answer 1

你不能进行变量名称插值，虽然Sass 3.3会引入一个map功能，你可以使用它来获得你想要的效果（见https://github.com/nex3/sass/issues/642）。

现在，不要迭代字符串列表，而是尝试遍历字符串/变量对列表的列表：

@each $breakpoint in "mobileMedium" $mobileMedium, "tabletVertical" $tabletVertical, "desktopNormal" $desktopNormal, "desktopWide" $desktopWide {
    @include breakpoint(nth($breakpoint, 2)) {
        @include generate(nth($breakpoint, 1), "Container", "width");
    }
}

（我不知道生成mixin的作用，我假设你的例子中你希望第一个参数是一个字符串。）

如何使用SASS @for循环将值传递给Breakpoint包含？

1 个答案: