CSS的预处理框架stylus学习教程

编译成

CSS Code复制内容到剪贴板

body {   
  color: #f00;   
}   
body ul li {   
  color: #00f;   
}   
body ul li a {   
  background-color: #00f;   
}  

Iteration(迭代)

stylus

CSS Code复制内容到剪贴板

table   
    for row in 1 2 3 4 5   
        tr:nth-child({row})   
            height: 10px * row  

编译成

C# Code复制内容到剪贴板

table tr:nth-child(1) {   
  height: 10px;   
}   
table tr:nth-child(2) {   
  height: 20px;   
}   
table tr:nth-child(3) {   
  height: 30px;   
}   
table tr:nth-child(4) {   
  height: 40px;   
}   
table tr:nth-child(5) {   
  height: 50px;   
}  

Interpolation(插值)

stylus

CSS Code复制内容到剪贴板

vendors = webkit moz o ms official   
border-radius()   
    for vendor in vendors   
        if vendor == official   
            border-radius: arguments   
        else   
            -{vendor}-border-radius: arguments   
#content   
    border-radius: 5px  

编译成

CSS Code复制内容到剪贴板

#content {   
  -webkit-border-radius: 5px;   
  -moz-border-radius: 5px;   
  -o-border-radius: 5px;   
  -ms-border-radius: 5px;   
  border-radius: 5px;   
}  

Operators(运算符)

运算符优先级
下表运算符优先级，从最高到最低：

.
 [] ! ~ + –
 is defined
 ** * / %
 + –
 … ..
 <= >= < >
 in
 == is != is not isnt
 is a
 && and || or