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

编译成

CSS Code复制内容到剪贴板

body {   
  font: 14px Arial, sans-seri;   
}  

变量放在属性中

stylus

CSS Code复制内容到剪贴板

#prompt  
    position: absolute  
    top: 150px  
    left: 50%   
    width: w = 200px  
    margin-left: -(w / 2)  

编译成

CSS Code复制内容到剪贴板

#prompt {   
  position: absolute;   
  top: 150px;   
  left: 50%;   
  width: 200px;   
  margin-left: -100px;   
}  

块属性访问引用

stylus

CSS Code复制内容到剪贴板

#prompt  
    position: absolute  
    width: 200px  
    margin-left: -(@width / 2)  

编译成

CSS Code复制内容到剪贴板

#prompt {   
  position: absolute;   
  width: 200px;   
  margin-left: -100px;   
}  

属性有条件地定义属性

stylus:指定z-index值为1，但是，只有在z-index之前未指定的时候才这样：

CSS Code复制内容到剪贴板

position()   
  position: arguments   
  z-index: 1 unless @z-index  
  
#logo  
  z-index: 20   
  position: absolute  
  
#logo2  
  position: absolute  

编译成

CSS Code复制内容到剪贴板

#logo {   
  z-index: 20;   
  position: absolute;   
}   
#logo2 {   
  position: absolute;   
  z-index: 1;   
}  

向上冒泡

stylus:属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）下面这个例子，@color被弄成了blue.

CSS Code复制内容到剪贴板

body   
  color: red  
  ul   
    li   
      color: blue  
      a   
        background-color: @color