使用 SASS Mixin 更改 MDC 布局网格的装订线大小答案

【问题标题】：Change the size of the gutter of an MDC layout grid using a SASS Mixin使用 SASS Mixin 更改 MDC 布局网格的装订线大小
【发布时间】：2018-06-14 14:03:46
【问题描述】：

我正在尝试使用 SASS Mixin 更改 MDC Material Components Web 布局网格的装订线大小，但失败了！

目前我正在使用：

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

我可以看到正在使用 mixin...但是排水沟保持不变的大小。

我做错了什么？

【问题讨论】：

标签： sass material-components-web

【解决方案1】：

在您的示例中，MDC-Web 的单元类应该是 mdc-layout-grid__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，如果您想避免这种情况，可以使用 Sass variables 修改布局网格。您需要在 @import 布局网格之前在您的主 .scss 文件中使用修改后的值设置此变量：

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

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

还值得一提的是，您可以使用 !default 标志覆盖在 MDC-Web 代码库中定义的任何 Sass 变量。

【讨论】：

谢谢很好。但是...仍然无法正常工作。列数的中间值似乎正在调整卡片正确分布的列数。然而，排水沟大小似乎并没有改变。但是，按照您的建议使用 sass 变量似乎确实有效。
看来您还需要指定一个CSS变量来修改装订线，我会更新答案。

【解决方案2】：

MDC Web's GitHub issue tracker 上讨论的交叉帖子：

mixin 似乎没有做任何事情的原因是它设置了正确的属性值，但随后立即用支持它的浏览器的 CSS 变量覆盖它。

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

例如(source):

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

这是我们计划在某个时候修复的bug。随时欢迎社区帮助！

【讨论】：

感谢 Andy，根据 Rusteems 的帖子，我认为那里可能存在错误。