csssassgridle

Register gridle states with sass


I'm trying to learn sass and gridle to use the grid system in my project but I have an error whilst trying to register my grid states:

$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 ),
);

Now with the above grid states I can get the properties by using:

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

So when I register my grid states, I thought I could do this:

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

but it is throwing an error:

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

I have also tried wrapping the map in a #{} : #{map-get(map-get($gridle-breakpoints, $name), 'min')} but this throws the same error and has the pointer before the #

How do I map these values in the loop properly or do I have to manually set them?


Solution

  • As it turns out, the $breakpoint in the each is just the bracketed part of the grid states so I can just pass that straight into the register state:

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