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

标签 sass material-components-web

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

目前我正在使用:

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

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

我做错了什么?

最佳答案

交叉发布 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我们计划在某个时候修复这个问题。随时欢迎社区帮助!

关于sass - 使用 SASS Mixin 更改 MDC 布局网格的装订线大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48102082/

相关文章:

css - 如何在 sass 中循环属性值?

css - 是否可以从导入的样式表中替换选择器?

javascript - 为 Material.io 设置环境的资源?

material-components-web - Material Component Web - MDCTab - 如何在 javascript 中设置事件选项卡

javascript - 如何使用 Material Components Web Foundations

css - 交错无限CSS动画

Laravel 8 JetStream Bootstrap 4

javascript - 无法使用 Webpack Encore 访问窗口 ["var_name"]

javascript - Material 设计网站 MDCTab :interacted event not emitting after activateTab

javascript - 将样式 css 转换为 scss