Search code examples
sassmaterial-components-web

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

I'm attempting to change the size of the gutter of an MDC Material Components web layout grid using a SASS Mixin and failing!

At present I'm using:

.mdc-layout-grid-cell
 {   
   @include mdc-layout-grid-cell('desktop', 3, 60px);
 }

I can see the mixin is being used...however the gutter stays steadfast the same size.

What am I doing wrong?

Solution

  • Cross-post from discussion on MDC Web's GitHub issue tracker:

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

    This is a bug that we plan to fix at some point. Community help is always welcome!