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

Я использую библиотеку компонентов дизайна материалов для Интернета. У меня есть компонент вкладки что я хотел бы поменять 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:

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

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

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

Это бросает

Error: expected ")".

я попробую

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

Та же ошибка.

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


sass scss-mixins gwt-material-design
person Caleb Jay    schedule 26.02.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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

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

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

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

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

person Matt Norrie    schedule 03.03.2020