1.語法
Stylus的語法花樣多一些，它使用“.styl”的擴展名，Stylus也接受標准的CSS語法，但是他也接受不帶花括號和分號的語法，如下所示：
/* style.styl */
h1 {
color: #0982C1;
}
/* 省略花括號 */
h1
color: #0982C1;
/* 省略花括號和分號 */
h1
color #0982C1
2.變量
你可以在CSS預處理器中聲明變量,並在整個樣式表中使用。CSS預處理器支持任何變量（例如：顏色、數值（不管是否包括單位）、文本）。然后你可以在任意地方引用變量。
Stylus聲明變量沒有任何限定,你可以使用"$"符號開始。結尾的分號(;)可有可無,但變量名和變量值之間的等號(=)是需要的。有一點需要注意的是,如果我們使用"@"符號開頭來聲明（0.22.4）變量，Stylus會進行編譯，但其對應的值並不會賦值給變量。換句話說，在Stylus中不要使用“@”符號開頭聲明變量。
mainColor = #0982c1 siteWidth = 1024px $borderStyle = dotted body color mainColor border 1px $borderStyle mainColor max-width siteWidth
上面的代碼都將轉譯成相同的CSS。你可以想像一下,變量的作用有多大。我們不需要為了修改一個顏色而輸入許多次,也不需要為了修改一個寬度去到找尋找他.(我們只需要修改定義好的變量,修改一次就足夠).下面是轉譯過來的CSS代碼:
body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
}
3.嵌套
如果我們在CSS中多個元素有一個相同的父元素，那么寫樣式會變得很乏味，我們需要一遍一遍的在每個元素前寫這個父元素.
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
相反，使用CSS預處理器，我們可以在父元素的花括號({})寫這些元素。同時可以使用“&”符號來引用父選擇器。
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
}
4.混合
Mixins是預處器中的函數。平時你在寫樣式時肯定有碰到過，某段CSS樣式經常要用到多個元素中，這樣你就需要重復的寫多次。在CSS預處器中，你可以為這些公用的CSS樣式定義一個Mixin，然后在你CSS需要使用這些樣式的地方，直接調用你定義好的Mixin。這是一個非常有用的特性。Mixins是一個公認的選擇器，還可以在Mixins中定義變量或者是默認參數。
可以不使用任何符號，就是直接定義Mixins名，然后在定義參數和默認值之間用等號（=）來連接。
/* Stylus 定義了一個名叫error的mixin，這個error設置了一個參數“$borderWidth”,在沒特別定義外，這個參數的值是默認值2px */
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* 調用error mixins */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* 調用error mixins，並將參數$borderWidth的值指定為5px */
}
轉譯后：
.generic-error {
padding: 20px;
margin: 4px;
border: 2px solid #f00;
color: #f00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
border: 5px solid #f00;
color: #f00;
}
5.繼承
在多個元素應用相同的樣式時，我們在CSS通常都是這樣寫：
p,
ul,
ol {
/* 樣式寫在這 */
}
這樣做非常的好，但往往我們需要給單獨元素添加另外的樣式，這個時候我們就需要把其中選擇器單獨出來寫樣式，這樣一回來我們維護樣式就相當的麻煩。為了應對這個問題，CSS預處理器可以從一個選擇繼承另一個選擇器下的所有樣式。
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block; /* 繼承.block所有樣式 */
border: 1px solid #EEE;
}
ul, ol {
@extend .block; /* 繼承.block所有樣式 */
color: #333;
text-transform: uppercase;
}
轉譯后：
.block, p, ul, ol {
margin: 10px 5px;
padding: 2px;
}
p {
border: 1px solid #EEE;
}
ul, ol {
color: #333;
text-transform: uppercase;
}
6.導入
在CSS中，並不喜歡用@import來導入樣式，因為這樣的做法會增加HTTP的請求。但是在CSS預處理器中的導入（@import）規則和CSS的有所不同，它只是在語義上導入不同的文件，但最終結果是生成一個CSS文件。如果你是通過“@import 'file.css'”導入“file.css”樣式文件，那效果跟普通CSS導入樣式文件一樣。注意：導入文件中定義了變量、混合等信息也將會被引入到主樣式文件中，因此需要避免他們的相互沖突。
/* file.{type} */
body {
background: #EEE;
}
@import "reset.css";
@import "file.{type}";
p {
background: #0982C1;
}
轉譯后
@import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
}
7.顏色函數
顏色函數是CSS預處里器中內置的顏色函數功能，這些功能可以對顏色值進行處理，例如顏色的變亮、變暗、漸變顏色等處理十分的方便。
lighten(color, 10%); /* 返回的顏色在'color'基礎上變亮10% */ darken(color, 10%); /* 返回的顏色在'color'基礎上變暗10% */ saturate(color, 10%); /* 返回的顏色在'color'基礎上飽和度增加10% */ desaturate(color, 10%); /* 返回的顏色在'color'基礎上飽和度降低10% */
下面是Stylus顏色函數的一個簡單實例
color = #0982C1 h1 background color border 3px solid darken(color, 50%)
8.運算符
body {
margin: (14px/2);
top: 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}
實際運用
屬性前綴
border-radius(values) {
-webkit-border-radius: values;
-moz-border-radius: values;
border-radius: values;
}
div {
border-radius(10px);
}
轉譯后
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
瀏覽器前綴的問題，主要是針對於CSS3屬性的運用，眾所周知，CSS3的屬性有並不是所有瀏覽器都支持屬性的標准語法，因此在實際運用中時，不得不加上各瀏覽器的前綴來識別。