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

@import

@import "reset.css"

当使用@import没有.css扩展，会被认为是Stylus片段（如：@import "mixins/border-radius"）。

@import工作原理为：遍历目录队列，并检查任意目录中是否有该文件（类似node的require.paths）。该队列默认为单一路径，从filename选项的dirname衍生而来。 因此，如果你的文件名是/tmp/testing/stylus/main.styl，导入将显现为/tmp/testing/stylus/。

@import也支持索引形式。这意味着当你@import blueprint, 则会理解成blueprint.styl或blueprint/index.styl. 对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。
@font-face

stylus

CSS Code复制内容到剪贴板

@font-face   
  font-family Geo   
  font-style normal  
  src url(fonts/geo_sans_light/GensansLight.ttf)   
  
.ingeo   
  font-family Geo  

编译成

CSS Code复制内容到剪贴板

@font-face {   
  font-family: Geo;   
  font-style: normal;   
  src: url("fonts/geo_sans_light/GensansLight.ttf");   
}   
.ingeo {   
  font-family: Geo;   
}  

@media

stylus

CSS Code复制内容到剪贴板

@media print  
  #header  
  #footer  
    display none  

编译成

CSS Code复制内容到剪贴板

@media print {   
  #header,   
  #footer {   
    display: none;   
  }   
}   
  
@keyframes  

stylus

CSS Code复制内容到剪贴板

@keyframes pulse   
    0%   
      background-color red  
      transform scale(1.0) rotate(0deg)   
    33%   
      background-color blue  
      -webkit-transform scale(1.1) rotate(-5deg)  

编译成

CSS Code复制内容到剪贴板

@-moz-keyframes pulse {   
  0% {   
    background-color: #f00;   
    transform: scale(1) rotate(0deg);