使用 SASS Mixin 更改 MDC 布局网格的间距大小

Question

我正在尝试使用 SASS Mixin 更改 MDC Material 组件 Web 布局网格的间距大小，但失败了！

目前我在用：

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

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

我做错了什么？

Answer 1

在您的示例中，MDC-Web 的单元格 class 应该是 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 修改 Layout Grid。在 @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 变量。

Answer 2

交叉post 来自 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 我们计划在某个时候修复的问题。随时欢迎社区帮助！

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