运算符
//一元运算符
//!, 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%);
}