sass - SASS Mixin を使用して MDC レイアウト グリッドのガターのサイズを変更する

Question

SASS Mixin を使用して MDC マテリアル コンポーネント Web レイアウト グリッドのガターのサイズを変更しようとしましたが、失敗しました!

現在、私は使用しています：

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

ミックスインが使用されていることがわかりますが、ガターは同じサイズのままです。

私は何を間違っていますか？

Answer 1

MDC Web の GitHub イシュー トラッカーに関するディスカッションからのクロスポスト:

ミックスインが何もしないように見える理由は、正しいプロパティ値を設定するためですが、それをサポートするブラウザーの 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);

これは、ある時点で修正する予定のバグです。コミュニティのヘルプはいつでも大歓迎です!