CSS Stylus（二）

运算符

//一元运算符
//!, not, -, +, 以及~

//二元运算符
add(a, b)
  if a is a 'unit' and b is a 'unit'
    a + b
  else
    (error 'a 和 b 必须是 units!')

body
  padding add(1,5)

//范围
1..5 // => 1 2 3 4 5
1...5 // => 1 2 3 4

//加减：+ -
.test
	padding: 15px - 5px  //padding: 10px;
	padding: 5 - 2  //padding: 3;
	padding: 5in - 50mm  //padding: 3.031496062992126in;
	padding: 5s - 1000ms  //padding: 4s;
	padding: 20mm + 4in  //padding: 121.6mm;
	padding: "foo " + "bar"  //padding: 'foo bar';
	padding: "num " + 15  //padding: 'num 15';

//乘除：/ * %
.test
	padding: 2000ms + (1s * 2)// => 4000ms
	padding: (6 / 2) // => 3
	padding: 4 % 2// => 0
	
//指数
.test
	padding: 2 ** 8// => 256

//相等与关系运算：== != >= <= > <

//真与假
	//true例子
	/*
		0% 
		0px
		1px 
		-1
		-1px
		hey
		'hey'
		(0 0 0)
		('' '')
	*/
	//false例子
	/*
		0 
		null
		false
		''
	*/


//逻辑操作符：&& || 和 or
//存在操作符：in
pad(types = padding, n = 5px)
	if padding in types
		padding n
	if margin in types
		margin n

body
  pad()

body
  pad(margin)

body
  pad(padding margin, 10px)
  
//条件赋值：?= :=
//color is defined ? color : white

//实例检查：is a
	/*
	15 is a 'unit'
	// => true

	#fff is a 'rgba'
	// => true

	15 is a 'rgba'
	// => false
	type(#fff) == 'rgba'
	// => true
	*/
   
//变量定义：is defined
	/*
	foo is defined
	// => false

	foo = 15px
	foo is defined
	// => true

	#fff is defined
	// => 'invalid "is defined" check on non-variable #fff'
	*/
ohnoes = true
body
  if ohnoes is defined
    padding 5px
	
//三元
num = 15
.test
	padding num ? unit(num, 'px') : 20px
	
//粘合 （可用于强制后缀）
body
  n = 5
  foo: (n)em
  foo: (n)%
  foo: (n + 5)%
  foo: (n * 5)px
  foo: unit(n + 5, '%')
  foo: unit(5 + 180 / 2, deg)
 
//颜色操作
.test
	color #0e0 + #0e0 // => #0f0
	color #888 + 50% // => #c3c3c3
	color #888 - 50% // => #444
	color #f00 + 50deg // => #ffd500
	color #f00 - rgba(100,0,0,0.5)

//格式化字符串
.test
	color '-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))

• 编译结果

/*******运算符******/
body {
  padding: 6;
}
.test {
  padding: 10px;
  padding: 3;
  padding: 3.031496062992126in;
  padding: 4s;
  padding: 121.6mm;
  padding: 'foo bar';
  padding: 'num 15';
}
.test {
  padding: 4000ms;
  padding: 3;
  padding: 0;
}
.test {
  padding: 256;
}
/*
		0% 
		0px
		1px 
		-1
		-1px
		hey
		'hey'
		(0 0 0)
		('' '')
	*/
/*
		0 
		null
		false
		''
	*/
body {
  padding: 5px;
}
body {
  margin: 5px;
}
body {
  padding: 10px;
  margin: 10px;
}
/*
	15 is a 'unit'
	// => true

	#fff is a 'rgba'
	// => true

	15 is a 'rgba'
	// => false
	type(#fff) == 'rgba'
	// => true
	*/
/*
	foo is defined
	// => false

	foo = 15px
	foo is defined
	// => true

	#fff is defined
	// => 'invalid "is defined" check on non-variable #fff'
	*/
body {
  padding: 5px;
}
.test {
  padding: 15px;
}
body {
  foo: 5em;
  foo: 5%;
  foo: 10%;
  foo: 25px;
  foo: 10%;
  foo: 95deg;
}
.test {
  color: #0f0;
  color: #c3c3c3;
  color: #444;
  color: #ffd500;
  color: rgba(155,0,0,0.5);
}
.test {
  color: -webkit-gradient(linear, 0 0, 0 100%);
}