stylus常用的功能

选择器
传统css写法

body {
  color: #fff;
}

stylus写法

body
  color white

当然也可以写成 color: white

父级引用
字符&指向父选择器。下面这个例子，我们两个选择器textarea和input在:hover伪类选择器上都改变了color值

textarea，
input
  color #A7A7A7
  &:hover
    color #000

相当于

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

变量
我们可以指定表达式为变量，然后在我们的样式中贯穿使用

$font-size = 14px
body {
  font: $font-size sans-serif;
}

mixins混合书写
和函数写法类似

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius(5px)

编译后

form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

混合书写可以利用其它混合书写，建立在它们自己的属性和选择器上

导入(@import)
任何.css扩展的文件名将作为字面量。例如：

@import "reset.css"

继承(@extend)

.message {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  @extend .message;
  color: #E2E21E;
}

等同于

message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  color: #E2E21E;
}

参考
https://www.zhangxinxu.com/jq/stylus/extend.php