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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
---
layout: default
permalink: docs/variables.html
---
# Variables
We may assign expressions to variables and use them throughout our stylesheet:
font-size = 14px
body
font font-size Arial, sans-serif
Compiles to:
body {
font: 14px Arial, sans-serif;
}
Variables can even consist of an expression list:
font-size = 14px
font = font-size "Lucida Grande", Arial
body
font font sans-serif
Compiles to:
body {
font: 14px "Lucida Grande", Arial sans-serif;
}
Identifiers (variable names, functions, etc.) may also include the `$` character. For example:
$font-size = 14px
body {
font: $font-size sans-serif;
}
## Property Lookup
Another cool feature unique to Stylus is the ability to reference
properties defined _without_ assigning their values to variables. A great example of this is the logic required for vertically and horizontally center an element (typically done using percentages and negative margins, as follows):
#logo
position: absolute
top: 50%
left: 50%
width: w = 150px
height: h = 80px
margin-left: -(w / 2)
margin-top: -(h / 2)
Instead of assigning the variables `w` and `h`, we can simply prepend the `@`
character to the property name to access the value:
#logo
position: absolute
top: 50%
left: 50%
width: 150px
height: 80px
margin-left: -(@width / 2)
margin-top: -(@height / 2)
Another use-case is conditionally defining properties within mixins based on the existence of others . In the following example, we apply a default `z-index` of `1`—but _only_ if `z-index` was not previously specified:
position()
position: arguments
z-index: 1 unless @z-index
#logo
z-index: 20
position: absolute
#logo2
position: absolute
Property lookup will "bubble up" the stack until found, or return `null` if the property cannot be resolved. In the following example, `@color` will resolve to `blue`:
body
color: red
ul
li
color: blue
a
background-color: @color
|
