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

  background: linear-gradient(20px top, #fff, #000);   
}  

Nesting(嵌套)

stylus

CSS Code复制内容到剪贴板

header   
    #logo  
        border:1px solid red  

编译成

header #logo {
  border: 1px solid #f00;
}

Flexible syntax(灵活的用法)

stylus

CSS Code复制内容到剪贴板

body   
    font 14px/1.5 Helvetica, arial, sans-serif  
    button   
    button.button   
    input[type=’button’]   
    input[type=’submit’]   
        border-radius 5px  
  
header    
    #logo,div   
        font-size:14px  

编译成

CSS Code复制内容到剪贴板

body {   
  font: 14px/1.5 Helvetica, arial, sans-serif;   
}   
body button,   
body button.button,   
body input[type=’button’] {   
  border-radius: 5px;   
}   
header #logo,   
header div {   
  font-size: 14px;   
}  

Flexible &(灵活&)

stylus

CSS Code复制内容到剪贴板

ul   
    li a   
        display: block  
        color: blue  
        padding: 5px  
        html.ie &   
            padding: 6px  
        &:hover   
            color: red  

编译成

CSS Code复制内容到剪贴板

ul li a {   
  display: block;   
  color: #00f;   
  padding: 5px;   
}   
html.ie ul li a {   
  padding: 6px;   
}   
ul li a:hover {   
  color: #f00;