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

Question

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

目前我正在使用：

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

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

我究竟做错了什么？

score 1 · Accepted Answer

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

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

例如（来源）：

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

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

score 1 · Accepted Answer

在您的示例中，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 变量修改 Layout Grid 。在 Layout Grid之前，您需要在主.scss文件中使用修改后的值设置此变量：@import

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

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

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

2 回答 2