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%);
}
上一篇:Spring4.1新特性——异步调度和事件机制的异常处理


下一篇:Spring4.1新特性——数据库集成测试