css - 在 sass 映射中选择具有值的特定元素

Question

我有一个 sass map 看起来像这样:

$settings: ("offset": 'margin-left',
    "push": 'left',
    "pull": 'right',
    "center": 'margin-left');

在下面，我有一个从 1 循环到值为 12 的特定变量的函数。

  @for $index from 1 to 12 {
    @each $type, $property in $settings {
      &.#{$type}-#{$index} {
        @include someFunctionDoesntMatter($property, $index);
      }
    }
  }

如您所见，我已经从那个 sass map 中选择了数据，但不是特定的数据，我只是循环所有数据。

我如何选择 map 中包含值的第 4 项？

我已经在循环的最后一个括号下尝试了这段代码:

  &.#{nth($settings, 4)} {
     ...
  }

但这给了我这个错误:

cmd.exe /D /C C:/Ruby200-x64/bin/scss.bat --no-cache --update main.scss:main.css
      error features\grid\_grid-extensions.scss (Line 19: Invalid CSS after "&.": expected class name, was ""center" "margi...")

Process finished with exit code 1

Answer 1

nth($settings, 4) 将返回键值对，而不是您可以用来构建选择器的值。

你可以这样做:

$settings: ("offset": 'margin-left',
    "push": 'left',
    "pull": 'right',
    "center": 'margin-left');

div {   
  &.#{nth(nth($settings, 4), 1)} {
    content: nth(nth($settings, 4), 2);
  }
}

这将呈现:

div.center {
  content: "margin-left";
}

http://sassmeister.com/gist/b8e6c2dc02b0d3df52b7