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