Others
~/src/stylus/utils/_variables.styl
// Others from guide
//////////////////////////////////////////////////////
$border-radiuses = {
soccer: 0,
dancing: 2px,
swimming: 3px,
shooting: 10px,
}
$opacites = {
waltz: 1,
funky: 0.75,
rock: 0.66,
psy: 0.45,
pop: 0.2,
reggae: 0,
}
$effects = {
duration: 0.1s,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Можно получить из этого миксины для более лаконичного синтаксиса ~/src/stylus/utils/_mixins.styl:
// Rounding
//////////////////////////////////////////////////////
$border-radius($name)
if $name == "soccer"
border-radius $border-radiuses.soccer // 0
if $name == "dancing"
border-radius $border-radiuses.dancing // 2px
if $name == "swimming"
border-radius $border-radiuses.swimming // 3px
if $name == "shooting"
border-radius $border-radiuses.shooting // 10px
// Opacity
//////////////////////////////////////////////////////
$opacity($name)
if $name == "waltz"
opacity $opacites.waltz // 1
if $name == "funky"
opacity $opacites.funky // 0.75
if $name == "rock"
opacity $opacites.rock // 0.66
if $name == "psy"
opacity $opacites.psy // 0.45
if $name == "pop"
opacity $opacites.pop // 0.2
if $name == "reggae"
opacity $opacites.reggae // 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Теперь можно:
.selector
$opacity("dancing")
$border-radius("funky")
1
2
3
2
3
Переменные все равно могут пригодиться если дизайнеры захотят сделать новый цвет с разрешенной прозрачностью:
.selector
color rgba($colors.dog, $opacites.psy)
1
2
2
Анимации
Единственные глобально компилируемые стилевые классы которые в строгой традиции разрешено использовать - для анимаций Vue. Вы можете добавлять их после соответсвующих @keyframes в специальном файле стилевой базы ~/src/stylus/core/_animation.styl:
// Project animations
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Keyframes
//////////////////////////////////////////////////////
@keyframes fade
0%
opacity 0
100%
opacity 1
// Vue classes for animation
//////////////////////////////////////////////////////
.fade
&-enter-active
animation fade ($effects.duration * 2) forwards
&-leave-active
animation fade ($effects.duration * 2) reverse
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Теперь в разметке:
<template>
<transition name="fade">
<div v-if="Boolean" />
</transition>
</template>
1
2
3
4
5
2
3
4
5