mixin

stylus css stylesheet

mixin和函数的声明方法是一样的，但是使用的时候存在区别。

• 函数

函数调用需要使用表达式即——funcName(params)
eg

border-radius(n)

• mixin

mixin调用的时候可以直接用做语句调用—— mixinName value value ...

1. 可以直接对原生的样式进行操作
2. 对于这种便利性的延伸我们可以方便地调用mixin用来添加厂商前缀。

在mixin/函数中使用关键字arguments的区别

函数中

如果其中待用/或者+之类的数学计算符号会进行计算

mixin中

除非是添加()括号非则会直接调用

mixin中可以进行父级引用

使用&符号

添加block

在使用mixin时加上+前缀即可传递blocks
eg

foo(){
  .bar
    {block}
}
+foo(){
  color:red
}

在mixin中组合调用其他的mixin

我们可以在其他的mixin中调用和组合其他的mixin
eg

stylus

 inline-list()
   li
     display inline
 comma-list()
   inline-list()
   li
     &:after
       content ', '
     &:last-child:after
       content ''
 ul
   comma-list()

编译成
css

ul li:after {
  content: ", ";
}
ul li:last-child:after {
  content: "";
}
ul li {
  display: inline;
}