1

我正在尝试设置一个循环，该循环将使用我设置的另一个循环为我定义的每个断点创建一组类。这些是 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) {")

我想这归结为如何将文本（'$'）和参数中的变量结合起来。

有任何想法吗？

4

1 回答 1

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");
    }
}

（我不知道 generate mixin 做了什么，我从你的例子中假设你希望第一个参数是一个字符串。）

于 2013-09-27T18:36:48.743 回答