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

注意读懂上面的哦，目录高对哦，这些没有必要提醒哦，这个时候你可以好好耍一下stylus
Stylus应用

这个时候真正的开始玩耍了哦。
Try Stylus!

stylus

CSS Code复制内容到剪贴板

body,html   
    margin:0   
    padding:0  

编译成

CSS Code复制内容到剪贴板

body,   
html {   
  margin: 0;   
  padding: 0;   
}  

stylus : 强大的功能丰富的语言

CSS Code复制内容到剪贴板

-pos(type, args)   
  i = 0   
  position: unquote(type)   
  {args[i]}: args[i + 1] is a ‘unit’ ? args[i += 1] : 0   
  {args[i += 1]}: args[i + 1] is a ‘unit’ ? args[i += 1] : 0   
  
absolute()   
  -pos(‘absolute’, arguments)   
  
fixed()   
  -pos(‘fixed’, arguments)   
  
#prompt  
  absolute: top 150px left 5px  
  width: 200px  
  margin-left: -(@width / 2)   
  
#logo  
  fixed: top left  

编译成

CSS Code复制内容到剪贴板

#prompt {   
  position: absolute;   
  top: 150px;   
  left: 5px;   
  width: 200px;   
  margin-left: -100px;   
}   
#logo {   
  position: fixed;   
  top: 0;   
  left: 0;   
}  

nibStylus插件

stylus

CSS Code复制内容到剪贴板

@import ‘nib’  
body   
  background: linear-gradient(20px top, white, black)   

编译成

CSS Code复制内容到剪贴板

body {   
  background: -webkit-linear-gradient(20px top, #fff, #000);   
  background: -moz-linear-gradient(20px top, #fff, #000);   
  background: -o-linear-gradient(20px top, #fff, #000);   
  background: -ms-linear-gradient(20px top, #fff, #000);