L3F.WIN

Github及Hexo的使用

0%

学习stylus【6】Rest参数（Rest Params）

发表于 更新于 分类于

Rest参数

Stylus 支持name…形式的其余参数。这些参数可以传递给 混入 或函数的参数们。这在处理浏览器私有属性，如-moz或-webkit的时候很管用。
下面这个例子中，所有的参数们(1px, 2px, …)都被一个args参数给简单处理了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
box-shadow(args...)
   -webkit-box-shadow args
   -moz-box-shadow args
   box-shadow args

 #login
   box-shadow 1px 2px 5px #eee

   =>
   #login {
    -webkit-box-shadow: 1px 2px 5px #eee;
    -moz-box-shadow: 1px 2px 5px #eee;
    box-shadow: 1px 2px 5px #eee;
  }

如果我们想查看一个特定的参数，比如x-offset，我们可以简单地使用args[0]。 或者，我们可能希望重新定义混入mixin：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
box-shadow(offset-x, args...)
  got-offset-x offset-x
  -webkit-box-shadow offset-x args
  -moz-box-shadow offset-x args
  box-shadow offset-x args

#login
  box-shadow 1px 2px 5px #eee

  =>
  #login {
    got-offset-x: 1px;
    -webkit-box-shadow: 1px 2px 5px #eee;
    -moz-box-shadow: 1px 2px 5px #eee;
    box-shadow: 1px 2px 5px #eee;
  }

参数

arguments变量可以实现表达式的精确传递，包括逗号等等。这可以弥补args…参数的一些不足，见下面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
box-shadow(args...)
  -webkit-box-shadow args
  -moz-box-shadow args
  box-shadow args

#login
  box-shadow #ddd 1px 1px, #eee 2px 2px

=>
#login {
  -webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
  -moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
  box-shadow: #ddd 1px 1px #eee 2px 2px;
}

逗号给忽略了。我们现在使用arguments重新定义这个混合书写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments

body
  box-shadow #ddd 1px 1px, #eee 2px 2px

=>
body {
  -webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
  -moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
  box-shadow: #ddd 1px 1px, #eee 2px 2px;
}