Skip to content
This repository
Newer
Older
100644 90 lines (65 sloc) 2.223 kb
0a85298b »
2014-01-30 Added YAML front matter, fixed headers
1 ---
2 layout: default
3 permalink: docs/variables.html
4 ---
d28938e9 »
2011-01-20 Added variables.md
5
0a85298b »
2014-01-30 Added YAML front matter, fixed headers
6 # Variables
d28938e9 »
2011-01-20 Added variables.md
7
8 We may assign expressions to variables and use them throughout our stylesheet:
9
10 font-size = 14px
11
12 body
13 font font-size Arial, sans-serif
14
0ab9219d »
2012-01-25 Edited documentation text for clarity, phrasing, punctuaton, grammar,…
15 Compiles to:
d28938e9 »
2011-01-20 Added variables.md
16
17 body {
18 font: 14px Arial, sans-serif;
19 }
20
21 Variables can even consist of an expression list:
22
23 font-size = 14px
24 font = font-size "Lucida Grande", Arial
25
26 body
27 font font sans-serif
28
0ab9219d »
2012-01-25 Edited documentation text for clarity, phrasing, punctuaton, grammar,…
29 Compiles to:
d28938e9 »
2011-01-20 Added variables.md
30
31 body {
32 font: 14px "Lucida Grande", Arial sans-serif;
94dfb70a »
2011-03-29 docs
33 }
34
0ab9219d »
2012-01-25 Edited documentation text for clarity, phrasing, punctuaton, grammar,…
35 Identifiers (variable names, functions, etc.) may also include the `$` character. For example:
94dfb70a »
2011-03-29 docs
36
37 $font-size = 14px
38 body {
d74be68a »
2011-12-11 doc typo
39 font: $font-size sans-serif;
731765e4 »
2011-08-12 Added the ability to reference property values with @name. Closes #344
40 }
41
b96821f4 »
2011-10-26 Added property lookup bubbling support. Closes #446
42 ## Property Lookup
731765e4 »
2011-08-12 Added the ability to reference property values with @name. Closes #344
43
44 Another cool feature unique to Stylus is the ability to reference
0ab9219d »
2012-01-25 Edited documentation text for clarity, phrasing, punctuaton, grammar,…
45 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):
731765e4 »
2011-08-12 Added the ability to reference property values with @name. Closes #344
46
47 #logo
48 position: absolute
49 top: 50%
50 left: 50%
51 width: w = 150px
52 height: h = 80px
53 margin-left: -(w / 2)
54 margin-top: -(h / 2)
55
0ab9219d »
2012-01-25 Edited documentation text for clarity, phrasing, punctuaton, grammar,…
56 Instead of assigning the variables `w` and `h`, we can simply prepend the `@`
731765e4 »
2011-08-12 Added the ability to reference property values with @name. Closes #344
57 character to the property name to access the value:
58
59 #logo
60 position: absolute
61 top: 50%
62 left: 50%
63 width: 150px
64 height: 80px
65 margin-left: -(@width / 2)
66 margin-top: -(@height / 2)
79f27f57 »
2011-08-16 Added support for @property mixin property access Closes #363
67
0ab9219d »
2012-01-25 Edited documentation text for clarity, phrasing, punctuaton, grammar,…
68 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:
79f27f57 »
2011-08-16 Added support for @property mixin property access Closes #363
69
70 position()
71 position: arguments
72 z-index: 1 unless @z-index
73
74 #logo
75 z-index: 20
76 position: absolute
77
78 #logo2
b96821f4 »
2011-10-26 Added property lookup bubbling support. Closes #446
79 position: absolute
80
0ab9219d »
2012-01-25 Edited documentation text for clarity, phrasing, punctuaton, grammar,…
81 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`:
b96821f4 »
2011-10-26 Added property lookup bubbling support. Closes #446
82
83 body
84 color: red
85 ul
86 li
87 color: blue
88 a
0a85298b »
2014-01-30 Added YAML front matter, fixed headers
89 background-color: @color
Something went wrong with that request. Please try again.