Stylus 支援的語法要多樣性一點，它預設使用 .styl 的副檔名，下面是 Stylus 支援的語法

h1 {
  color: #0982C1;
}
  
/* omit brackets */
h1
  color: #0982C1;
  
/* omit colons and semi-colons */
h1
  color #0982C1

Stylus 對變數名沒有任何限定，你可以是 $ 開始，也可以是任意的字元，而且與變數值之間可以用冒號、空格隔開，需要注意的是 Stylus (0.22.4) 將會編譯 @ 開始的變數，但其對應的值並不會賦予該變數，換句話說，在 Stylus 的變數名不要用 @ 開頭

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
  
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

巢狀

section {
  margin: 10px;
  
  nav {
    height: 25px;
  
    a {
      color: #0982C1;
  
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
 

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
  
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}
 

 繼承

當我們需要為多個元素定義相同樣式的時候，我們可以考慮使用繼承的做法

.block {
  margin: 10px 5px;
  padding: 2px;
}
  
p {
  @extend .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}