_stylebase.styl
Глобальный медиатор стилей собирает не компилируемые /utils, компилируемые /core сущности и необходимые глобально кастомизации используемых сторонних модулей /libs (но, те которые позволяют это сделать без scoped - стоит разместить в SFC-обертках).
@/src/stylus/_stylebase.styl библиотеки:
// utils
@import "utils/_variables";
@import "utils/_placeholders";
@import "utils/_mixins";
@import "utils/_typography";
// core
@import "core/_base"; // normalize
@import "core/_animations";
// libs
// ...
2
3
4
5
6
7
8
9
10
11
12
Теперь можно использовать всю эту кухню на компонентах:
<style lang="stylus" scoped>
@import "~/src/stylus/_stylebase.styl";
...
</style>
2
3
4
5
Это можно назвать «глобальными стилями-невидимками», что-то такое - они, с одной стороны - участвуют в правильном оформлении везде, но, при этом, «их не видно». Мы предоставляем глобальные константы гайдлайна и всю прочую мощь препроцессора всем компонентным системам - библиотеке и всем ее «читателям».
Mixins and placeholders
UI Library Starter дает надежду на то, что в вашей разметке код будет полностью оптимальный и консистентный. Это способно сделать даже крупную систему из нескольких проектов базирующихся на одном визуальном языке - и полностью управляемой, и, в тоже время - гибкой.
DANGER
Не копируйте код кусками по компонентам - оптимизируйте очевидно одинаковые наборы в миксинах и плейсхолдерах!
@/src/stylus/utils/_placeholders.styl
// Project placeholders
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Utilities
//////////////////////////////////////////////////////
$flex--center
display flex
align-items center
justify-content center
2
3
4
5
6
7
8
9
10
11
12
Или вы можете делать примеси без параметров для того чтобы - забегая вперед (см. раздел Breakpoints) - такой же пассаж стал доступен внутри медиа-миксинов:
@/src/stylus/utils/_mixins.styl
// Utilities
//////////////////////////////////////////////////////
// Mixins without arguments duplicate placeholders,
// so it can be passed to media mixins
$flex--center()
display flex
align-items center
justify-content center
2
3
4
5
6
7
8
9
Теперь:
.selector
+$tablet()
$flex--center()
2
3