Измените размер желоба макетной сетки MDC с помощью микшера SASS.

Question

Я пытаюсь изменить размер желоба сетки веб-макета компонентов материала MDC с помощью микшера SASS и не могу!

В настоящее время я использую:

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

Я вижу, что миксин используется... однако желоб остается устойчивым того же размера.

Что я делаю неправильно?

Answer 1

Кросс-пост от обсуждения на трекере GitHub MDC Web:

Причина, по которой миксин, похоже, ничего не делает, заключается в том, что он устанавливает правильное значение свойства, но затем немедленно переопределяет его переменной 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);

Это ошибка, которую мы планируем исправить в какой-то момент. Помощь сообщества всегда приветствуется!

Answer 2

В вашем примере класс ячеек 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;
}

Но использование миксина может создать дополнительный CSS, и если вы хотите избежать этого, вы можете модифицировать Layout Grid с помощью переменных Sass. Вы должны установить эту переменную в своем главном .scss файл с измененными значениями перед @importв сетке макетов:

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

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

Также стоит упомянуть, что вы можете переопределить любую переменную Sass, которая определена в кодовой базе MDC-Web, с помощью !default флаг.