Как работает руководство по созданию шаблона?

Я не могу понять, как этот блок Sass заменяется скриптом gulp?

https://github.com/google/material-design-lite/blob/master/src/_variables.scss#L104-L110

@if $styleguide-generate-template == true {
  $color-primary: '$color-primary';
  $color-primary-dark: '$color-primary-dark';
  $color-accent: '$color-accent';
  $color-primary-contrast: '$color-primary-contrast';
  $color-accent-contrast: '$color-accent-contrast';
}

https://github.com/google/material-design-lite/blob/master/gulpfile.babel.js#L142

Например, как я могу создать свой собственный шаблон цвета, не испортив mdl sccs с помощью файла gulp?


material-design-lite
person Gert Cuykens    schedule 07.10.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Не беспокойтесь о блоке руководства по стилю. Это для создания файла, используемого для пользовательской генерации на интерфейсе предоставленного настройщика.

Чтобы создать собственный цветовой шаблон, просто определите переменные в этом блоке в scss перед импортом material-design-lite.scss.

person Garbee    schedule 09.10.2015
comment
Хорошо, это имеет смысл, но все же the styleguide block — это полная загадка, где он получает свои переменные, установленные в gulpfile. Я понимаю, что мне не нужно об этом беспокоиться, но я хочу понять процесс глотка :) - person Gert Cuykens; 09.10.2015
comment
Это не имеет ничего общего с процессом gulp. Это все только Sass. Этот блок говорит о том, что при создании файла настройщика нужно поместить строки вместо значений. Это позволяет легко заменить в JS настройщик - person Garbee; 11.10.2015
comment
Можете ли вы дать мне URL-адрес github части в коде js, где настройщик заменяет код? - person Gert Cuykens; 12.10.2015
comment
github.com/google/material- design-lite/blob/master/docs/_assets/ - person Garbee; 12.10.2015
comment
Спасибо :) Можете ли вы включить это в свой ответ, пожалуйста, тогда я могу принять его - person Gert Cuykens; 12.10.2015
comment
Я не вижу смысла включать его в ответ, так как ответ уже отвечает на ваш точный вопрос. Все это обсуждение комментариев не имеет отношения к основному вопросу. - person Garbee; 12.10.2015
comment
Потому что название моего вопроса связано с этим? И это очень ценная информация, потому что я не мог понять это сам. Как работал шаблон руководства по стилю. - person Gert Cuykens; 13.10.2015
comment
Я до сих пор не понимаю, как поместить свои собственные фирменные цвета в эти переменные. Например, mi primary dark — это #304654, но MDL, кажется, работает с RGB. Каков формат замены этого цвета в _variables.scss? Или мне нужно было добавить свои собственные цвета RGB шаблона в customizer.js перед сборкой? Спасибо. - person Martin Revert; 01.03.2016
comment
Итак, $color-primary-dark: rgb(48,70,84) !default; в порядке синтаксиса? - person Martin Revert; 01.03.2016