Question: Change the size of the gutter of an MDC layout grid using a SASS Mixin

[MrChriZ]

I've opened a StackOverflow question here: https://stackoverflow.com/questions/48102082/change-the-size-of-the-gutter-of-an-mdc-layout-grid-using-a-sass-mixin

It's not getting many views though so I hope you don't mind me asking here. What's the correct procedure for changing the gutter size with the SASS Mixins?

Thanks, Chris.

[acdvorak]

mdc-layout-grid's Sass mixins are, frankly, a bit of a mess.

The reason the mixin doesn't appear to do anything is because it sets the correct property value, but then immediately overrides it with a CSS variable for browsers that support it.

However, we never update the value of the CSS variable, so modern browsers continue to render the inherited value instead.

E.g. (source):

// We could set --mdc-layout-grid-gutter-#{$size} to $gutter here...
grid-gap: $gutter;
grid-gap: var(--mdc-layout-grid-gutter-#{$size}, $gutter);

We should probably just nuke the CSS variables... They've been causing lots of issues like this.

[drimlike]

Is there any news on this one please? Seems to be bugged. We can't change the gutter size using the sass mixin.

[daviddouglas-smarsh]

I'm currently seeing a similar issue as I can't override breakpoints, margins or gutters using the sass variables as expected.