使用 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');
    ));
  }
}

但它抛出错误：

模块构建失败：ModuleBuildError：模块构建失败：
        最小宽度：map-get(map-get($gridle-breakpoints, $name), 'min');
                                                                    ^
      圆括号

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

之前

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

Answer 1

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

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

使用 sass 注册网格状态

Register gridle states with sass

css

sass

gridle