CSS 格式的语法

Stylus 完全支持常规的 CSS 格式的语法，这意味着你无需寻求其它解析器，或指定文件使用特定的样式。

示例

以下代码使用的是缩进格式：

 border-radius()
   -webkit-border-radius arguments
   -moz-border-radius arguments
   border-radius arguments

 body a
   font 12px/1.4 "Lucida Grande", Arial, sans-serif
   background black
   color #ccc

 form input
   padding 5px
   border 1px solid
   border-radius 5px

因为花括号、冒号及分号都是可选的，因此上面的示例我们可以按照普通 CSS 的语法书写：

 border-radius() {
   -webkit-border-radius: arguments;
   -moz-border-radius: arguments;
   border-radius: arguments;
 }

 body a {
   font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
   background: black;
   color: #ccc;
 }

 form input {
   padding: 5px;
   border: 1px solid;
   border-radius: 5px;
 }

虽然 Stylus 不支持 所有 可能的类 CSS 语法，但它可以理解下面这样的代码：

    border-radius() {
      -webkit-border-radius: arguments;
      -moz-border-radius: arguments;
      border-radius: arguments;
    }

body a
{
  font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
    background: black;
  color: #ccc;
}

    form input {
      padding: 5px;
  border: 1px solid;
      border-radius: 5px;
      }

由于我们可以混合使用这两种语法格式，因此以下代码也是有效的：

 border-radius()
   -webkit-border-radius: arguments;
   -moz-border-radius: arguments;
   border-radius: arguments;

 body a {
   font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
   background: black;
   color: #ccc;
 }

 form input
   padding: 5px;
   border: 1px solid;
   border-radius: 5px;

变量、函数、混合（mixins），以及 Stylus 提供的所有功能仍然如预期的那样工作：

 main-color = white
 main-hover-color = black

 body a {
   color: main-color;
   &:hover { color: main-hover-color; }
 }

 body a { color: main-color; &:hover { color: main-hover-color; }}

这个规则有几个注意事项：由于这两种语法格式可能是混合使用的，所以某些缩进规则仍然会起作用。因此，虽然不是 每个 普通的 CSS 样式表都可以进行零修改，但是这个特性允许那些喜欢 CSS 语法的人继续这样做，同时还能使用 Stylus 的其他强大功能。

Stylus on GitHub