1.@import 导入
Stylus支持字面@import CSS, 也支持其他Stylus样式的动态导入。
任何.css扩展的文件名将作为字面量。例如：
@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. 对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。
如下很常见的库结构：
./tablet
|-- index.styl
|-- vendor.styl
|-- buttons.styl
|-- images.styl
2. @media 媒体
@media工作原理和在常规CSS中一样，但是，要使用Stylus的块状符号。
@media print
#header
#footer
display none
生成为： @media print {
#header,
#footer {
display: none;
}
}
3. @font-face 自定义字体
@font-face跟其在CSS中作用表现一样，在后面简单地添加个块状属性即可，类似下面：
@font-face
font-family Geo
font-style normal
src url(fonts/geo_sans_light/GensansLight.ttf) .ingeo
font-family Geo
生成为： @font-face {
font-family: Geo;
font-style: normal;
src: url("fonts/geo_sans_light/GensansLight.ttf");
}
.ingeo {
font-family: Geo;
}
4.@keyframes 关键帧
Stylus支持@keyframes规则，当编译的时候转换成@-webkit-keyframes：
@keyframes pulse
0%
background-color red
opacity 1.0
-webkit-transform scale(1.0) rotate(0deg)
33%
background-color blue
opacity 0.75
-webkit-transform scale(1.1) rotate(-5deg)
67%
background-color green
opacity 0.5
-webkit-transform scale(1.1) rotate(5deg)
100%
background-color red
opacity 1.0
-webkit-transform scale(1.0) rotate(0deg)
生成为： @-webkit-keyframes pulse {
0% {
background-color: red;
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
} 33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
} 67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
} 100% {
background-color: red;
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
} }
扩展：
使用@keyframes，通过vendors变量，会自动添加私有前缀(webkit moz official)。这意味着你可以子啊任意时候立即高效地做修改。
@keyframes foo {
from {
color: black
}
to {
color: white
}
}
扩增两个默认前缀，官方解析：
@-moz-keyframes foo {
0% {
color: #000;
}
100% {
color: #fff;
}
}
@-webkit-keyframes foo {
0% {
color: #000;
}
100% {
color: #fff;
}
}
@keyframes foo {
0% {
color: #000;
}
100% {
color: #fff;
}
}如果我们只想有标准解析，很简单，修改vendors：
vendors = official
@keyframes foo {
from {
color: black
}
to {
color: white
}
}
生成为：
@keyframes foo {
0% {
color: #000;
}
100% {
color: #fff;
}
}5.继承 @extend
Stylus的@extend指令受SASS实现的启发，基本一致，除了些轻微差异。此功能大大简化了继承其他语义规则集的语义规则集的维护。
使用__@extend__得到同样的输出，只要把对应的选择器传给@extend即可。然后.warning选择器就会继承已经存在的.message规则。
.message {
padding: 10px;
border: 1px solid #eee;
}
.warning {
@extend .message; 继承了message中的样式
color: #E2E21E;
}这儿是个更复杂的例子，演示了__@extend__如何级联。
red = #E33E1E
yellow = #E2E21E .message
padding: 10px
font: 14px Helvetica
border: 1px solid #eee .warning
@extends .message
border-color: yellow
background: yellow + 70% .error
@extends .message
border-color: red
background: red + 70% .fatal
@extends .error
font-weight: bold
color: red
生成CSS如下： .message,
.warning,
.error,
.fatal {
padding: 10px;
font: 14px Helvetica;
border: 1px solid #eee;
}
.warning {
border-color: #e2e21e;
background: #f6f6bc;
}
.error,
.fatal {
border-color: #e33e1e;
background: #f7c5bc;
}
.fatal {
font-weight: bold;
color: #e33e1e;
}
6. CSS字面量（CSS Ｌｉｔｅｒａｌ）
不管什么原因，如果遇到Stylus搞不定的特殊需求，你可以使用@css使其作为CSS字面量解决之。
@css {
body {
font: 14px;
}
}
编译为：
body {
font: 14px;
}Stylus可以字符转码。这可以让字符变成标识符，或是渲染成字面量。
body
padding 1 \+ 2
编译成： body {
padding: 1 + 2;
}
注意Stylus中/当作为属性使用的时候需要用括号括起来：
body
font 14px/1.4
font (14px/1.4)
生成： body {
font: 14px/1.4;
font: 10px;
}
https://www.zhangxinxu.com/jq/stylus/js.php