Skip to content
This repository
Newer
Older
100644 85 lines (58 sloc) 2.484 kb
da762851 »
2011-01-24 Started vargs docs
1
0e576cca »
2011-01-27 docs
2 ## Rest Parameters
da762851 »
2011-01-24 Started vargs docs
3
0e576cca »
2011-01-27 docs
4 Stylus supports rest parameters in the form of `name...`. These params consume the remaining arguments passed to a mixin or function. This is useful for example when utilizing the implicit function call support to apply vendor prefixes like `-webkit` or `-moz`.
da762851 »
2011-01-24 Started vargs docs
5
6
7 In the example below we consume all the arguments passed and simply apply them to multiple properties.
8
9 box-shadow(args...)
10 -webkit-box-shadow args
11 -moz-box-shadow args
12 box-shadow args
13
14 #login
15 box-shadow 1px 2px 5px #eee
16
17 yielding:
18
19 #login {
20 -webkit-box-shadow: 1px 2px 5px #eee;
21 -moz-box-shadow: 1px 2px 5px #eee;
22 box-shadow: 1px 2px 5px #eee;
23 }
24
c4e3c4a5 »
2011-01-24 more docs
25 If we wanted to peek at a specific argument, for example the x-offset we could simply use `args[0]`, or for example we may wish to re-define the mixin:
26
27 box-shadow(offset-x, args...)
28 got-offset-x offset-x
29 -webkit-box-shadow offset-x args
30 -moz-box-shadow offset-x args
31 box-shadow offset-x args
32
33 #login
34 box-shadow 1px 2px 5px #eee
35
36 yielding:
37
38 #login {
39 got-offset-x: 1px;
40 -webkit-box-shadow: 1px 2px 5px #eee;
41 -moz-box-shadow: 1px 2px 5px #eee;
42 box-shadow: 1px 2px 5px #eee;
43 }
44
89ec4314 »
2011-01-27 Docs for how (and why) to use the arguments local
45 ### arguments
46
47 The `arguments` variable is injected into mixin and function bodies, containing the exact expression passed. This is useful for several reasons, primarily for vendor support, as you get the _exact_ expression, commas and all.
48
49 For example, if we use a rest param, the comma is simply consumed since it is an expression delimiter:
50
51 box-shadow(args...)
52 -webkit-box-shadow args
53 -moz-box-shadow args
54 box-shadow args
55
56 #login
57 box-shadow #ddd 1px 1px, #eee 2px 2px
58
59 yielding slightly unexpected results:
60
61 #login {
62 -webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
63 -moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
64 box-shadow: #ddd 1px 1px #eee 2px 2px;
65 }
66
67 Let's redefine the mixin using `arguments`:
68
69 box-shadow()
70 -webkit-box-shadow arguments
71 -moz-box-shadow arguments
72 box-shadow arguments
73
74 body
75 box-shadow #ddd 1px 1px, #eee 2px 2px
76
77 now yielding the desired result:
78
79 body {
80 -webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
81 -moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
82 box-shadow: #ddd 1px 1px, #eee 2px 2px;
83 }
84
Something went wrong with that request. Please try again.