SASSよりさらにシンプルな記述ができる、CSS言語「Stylus」を導入しました。
Stylusを使う上で、SASSとの違いにハマったことがいくつかあったのでメモです。

1. Stylusの@extendはネストされたセレクタを指定できるが、ルートから記述しないとエラー

例えば下記のような構造で、SASSでは.selector3を.selector2の継承にするとき、.selector3の中に@extend .selector2と記述すればOKでしたが、

NGコード

.selector1
color #000
.selector2
color #fff
.selector3
@extend .selector2

Stylusでは’Failed to @extend “.selector2” ‘とエラーになります。
.selector3の中を、@extend .selector1 .selector2と記述しなければならないようです。

OKコード

 
.selector1
color #000
.selector2
color #fff
.selector3
@extend .selector1 .selector2

指定するセレクタが深い場合、いちいちルートから記述してのはかなり不便です。が、そもそもセレクタはあまり深くしすぎると、生成されるCSSのコードが長くなってしまうため、セレクタは2階層ぐらいに留めておければ、@extendする時にも苦ではないかもしれません。

2. IEのグラデーションは、「unquote」を追加しないとエラー

SASSで使っていたグラデーションのmixinを使おうとしたところ、IE用グラデーションはStylusの文法に合わないようで、「unquote」を追加しなければならないようです。

NGコード

filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

OKコード

filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')

3. メディアクエリに応じたスタイルを記述するときは、block mixinを使う

レスポンシブサイトで、SASSではこのような使い方をしていました。

SASSでのmixin定義：

@mixin breakpoint($width)
   @media (min-width : $width)
      @content

SASSで呼び出すときの例：

@include breakpoint(768px)
   color #000

Sylusではこの記述方法が使えなません。頭に「+」をつけたblock mixinという方法を使います。

Stylusでのmixin定義：

breakpoint(width)
   @media (min-width width)
      {block}

Stylusで呼び出すときの例：

+breakpoint(768px)
   color #000

Stylusの方がちょっぴりシンプルに書けます。

4. SASSではコンパイルされなかった「_（アンダーバー）」をつけたパーシャルが、Stylusではコンパイルされてしまう。

これはStylusの問題ではなくコンパイラの問題ですが、これまでSASSのコンパイルに使用していたCompassでは、ファイル名の頭に「 _ 」をつけたパーシャルはcssファイルが作られませんでした。
Stylusのコンパイルではgulpを使用しているのですが、パーシャルを含むStylusディレクトリを指定すると、パーシャルまでCSSが生成されてしまいます。
watchは全Stylusファイルを指定し、コンパイルは「 _ 」を除くStylusファイルを指定する必要がありました。

例：watchするソース

"./_stylus/*.styl"

例：コンパイルするソース

["./_stylus/*.styl", "!./_stylus/_*.styl"]

これでSASSと同様、それ以上の快適さを得られた気がします。