css - 使用 sass 注册网格状态

Question

我正在尝试学习 sass 和 gridle 以在我的元素中使用网格系统，但在尝试注册我的网格状态时出现错误:

$gridle-breakpoints: (
  mobile:           ( gutter: 'g-xsmall',   max: 767px ),
  tablet:           ( gutter: 'g-small',    min: 768px ),
  tablet-exact:     ( gutter: 'g-small',    min: 768px,   max: 1199px ),
  desktop:          ( gutter: 'g-medium',   min: 1200px ),
  desktop-exact:    ( gutter: 'g-small',    min: 1200px,  max: 1599px ),
  desktop-lg:       ( gutter: 'g-large',    min: 1600px ),
);

现在有了上面的网格状态，我可以使用以下方法获取属性:

map-get(map-get($gridle-breakpoints, 'desktop'), 'min');

所以当我注册我的网格状态时，我想我可以这样做:

@each $name, $breakpoint in $gridle-breakpoints {
  @if map-has-key($breakpoint, 'min') and map-has-key($breakpoint, 'max') {
    @include gridle_register_state($name, (
        min-width: map-get(map-get($gridle-breakpoints, $name), 'min');
        max-width: map-get(map-get($gridle-breakpoints, $name), 'max');
    ));
  }
}

但是它抛出一个错误:

Module build failed: ModuleBuildError: Module build failed: 
        min-width: map-get(map-get($gridle-breakpoints, $name), 'min');
                                                                    ^
      Unclosed parenthesis

我还尝试将 map 包装在 #{} 中:#{map-get(map-get($gridle-breakpoints, $name), 'min')} 但这会引发相同的错误并且指针位于 #

之前

如何在循环中正确映射这些值，还是必须手动设置它们？

Answer 1

事实证明，each 中的 $breakpoint 只是网格状态的括号部分，所以我可以直接将其传递到寄存器状态:

@each $name, $breakpoint in $gridle-breakpoints {
  @include gridle_register_state($name, $breakpoints);
}