使用SASS Mixin更改MDC布局格线的边沟大小

我正在尝试使用SASS Mixin更改MDC材质组件web布局网格的边沟大小，但失败了

目前我正在使用：

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

我可以看到正在使用混合器……但是排水沟保持不变

---

我做错了什么？

在您的示例中，MDC Web的单元格类应该是

MDC-layout-grid\u cell

，而不是

MDC layout grid cell

：

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

此外，您需要指定CSS变量来修改檐槽：

:root {
  --mdc-layout-grid-gutter-desktop: 60px;
}

但是使用mixin可以创建额外的CSS，如果您想避免这种情况，可以使用修改布局网格。在导入布局网格之前，需要在主

.scss

文件中使用修改后的值设置此变量：

// Gutter size
$mdc-layout-grid-default-gutter: (
  desktop: 24px,
  tablet: 16px,
  phone: 16px
);

@import "@material/layout-grid/mdc-layout-grid";

---

还值得一提的是，您可以使用

覆盖MDC Web代码库中定义的任何Sass变量！默认设置

标志。

交叉张贴讨论内容：

mixin似乎什么都不做的原因是它设置了正确的属性值，但随后立即用支持它的浏览器的CSS变量覆盖它

但是，我们从不更新CSS变量的值，因此现代浏览器继续呈现继承的值

例如：（）：

---

这是一个我们计划在某个时候解决的问题。欢迎社区帮助

谢谢，接得好。然而。。。仍然不起作用。列数的中间值似乎是调整卡片正确分布的列数。然而，排水沟的大小似乎没有改变。不过，使用您建议的sass变量似乎确实有效。似乎您还需要指定一个CSS变量来修改排水沟，我将更新答案。感谢Andy基于Rusteems的帖子，我认为可能存在错误。

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