stylus - 函数与插值符号

Stylus

函数

     Stylus强大之处就在于其内置的语言函数定义，并且可以自主的返回值。

borders(arg)
	-webkit-border-radius arg
	-moz-border-radius arg
	border-radius arg
div
	borders(1px solid red)

上述代码编译结果为：

div {
  -webkit-border-radius: 1px solid #f00;
  -moz-border-radius: 1px solid #f00;
  border-radius: 1px solid #f00;
}

通过stylus的函数，来实现a + b的一个效果。
为什么调用时要用( )把plus函数括起来，如果不括会是这个样子 20 px，中间会有一个空格，括起来就可以了。如果后面没有别的属性，是可以不用括的。

plus(a, b)
	a + b
div
	width 100px
	height 100px
	border (plus(10,10)px) solid red

上述代码编译结果为：

div {
  width: 100px;
  height: 100px;
  border: 20px solid #f00;
}

默认参数

     如果b不传参数，则会将a的值赋给b，当然也可以默认为其它值。

add(a, b = a)
	a + b

函数多个返回值

     stylus的函数可以返回多个值，使用当前值对应的小标来拿取。

size()
	15px 20px
	
size()[1] solid red // => 20px

变量赋多个值

size = 100px 200px

size[0] // => 100px

在函数内拿取实参赋值给形参的值。

size(a, b)
	a b
	
size(10px, 20px) // => 10px 20px 会同时拿到两个值
size(10px, 20px)[1] // => 这样是错误的

为避免歧义，我们可以使用括号，或是return关键字。

size(a, b)
	return a b
	
size(10px, 20px)[1] // => 20px

插值符号

     Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{‘border’ + ‘-radius’}等同于-webkit-border-radius。

borders(prop, args)
	 -webkit-{prop} args
	 -moz-{prop} args
	 {prop} args
div
	borders(border-radius, 10px solid red)

上述代码编译结果为：

div {
  -webkit-border-radius: 10px solid #f00;
  -moz-border-radius: 10px solid #f00;
  border-radius: 10px solid #f00;
}