Что означает «использовать этот миксин SASS» в контексте компонентов дизайна материалов? - PullRequest
Новая
       28

Что означает «использовать этот миксин SASS» в контексте компонентов дизайна материалов?

2 голосов
/ 26 февраля 2020

Я использую библиотеку Material Design Components for Web . У меня есть компонент табуляции , который я бы хотел изменить underline-color.

В инструкциях написано

Чтобы настроить индикатор табуляции, используйте следующие миксины.

Затем приводится таблица. Для цвета подчеркивания написано

underline-color ($ color) Настраивает цвет подчеркивания.

Итак, я пытаюсь в моем файле scss, следующее: 

  .mdc-tab-indicator {
      underline-color(red);
  }

Я компилирую sass (используя dart-sass) и получаю следующую ошибку 

Error: expected "{".

Он говорит, что это «Sass Mixin». Итак, я смотрю документацию SASS по миксинам . Я не вижу ничего, что следует синтаксису mixin-name($variable). Все там выглядит как 

@mixin reset-list {
  margin: 0;
}

с фигурными скобками, а не в скобках. Но ошибка говорит о том, что она ожидает фигурную скобку, а также, очевидно, требуется символ @. Итак, я пытаюсь: 

  .mdc-tab-indicator {
      @underline-color(red);
  }

Это не выдает ошибку, но не вызывает изменения цвета подчеркивания. Я пытаюсь следовать синтаксису sass docs: 

  .mdc-tab-indicator {
      @underline-color(red){};
  }

Нет ошибок, но нет изменения цвета. Я пытаюсь лучше подобрать синтаксис: 

  .mdc-tab-indicator {
      @mixin underline-color(red){};
  }

Это выдает 

Error: expected ")".

Я пытаюсь 

  .mdc-tab-indicator {
      @mixin underline-color(red);
  }

Та же ошибка.

Я не понимаю, что инструктирует документация по компонентам материала. Что это означает, когда он говорит: «Чтобы настроить индикатор вкладки, используйте следующие миксины». ? Как изменить цвет подчеркивания индикатора вкладки «Компонент дизайна материала»?

1 Ответ

2 голосов
/ 03 марта 2020

Миксины определяются с помощью правила @mixin at, которое записывается как @mixin {...} или @mixin name () {...}. Именем миксина может быть любой идентификатор Sass, и он может содержать любые операторы, кроме операторов верхнего уровня. Они могут использоваться для инкапсуляции стилей, которые могут быть сброшены в одно правило стиля; они могут содержать собственные правила стилей, которые могут быть вложены в другие правила или включены на верхнем уровне таблицы стилей; или они могут просто служить для изменения переменных.

Миксины включаются в текущий контекст с помощью @include at-rule, которое пишется @include или @include (), с включенным именем миксина.

Итак, чтобы включить ваше конкретное c смешанное использование: 

.mdc-tab-indicator {
      @include underline-color(red);
  }

Подробнее на https://sass-lang.com/documentation/at-rules/mixin

...