阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Stylus 其余参数 Rest Params

      其余参数

      Stylus支持name...形式的其余参数。这些参数可以消化传递给混写或函数的参数们。这在处理浏览器私有属性,如-moz-webkit的时候很管用。

      下面这个例子中,所有的参数们(1px, 2px, …)都被一个args参数给简单消化了:

      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], 或者,我们可能希望重新定义混入。

      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...参数的一些不足,见下面的例子:

      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重新定义这个混合书写。

      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;
      }```
      目录
      目录