Stylus 変数の計算で不等号を変更するときのメモ。

CSSのプリプロセッサはSASSとLESSの2強の様ですが、ぼくは頑なにStylusを使っています。
Stylusで変数を使って値を計算させる時、マイナスの値にしたいとかで不等号を変更する時は注意が必要です。

$posX = 100
.myClass
  background-position: -$posX 0

↓ 出力されるCSS

.myClass {
  background-position: -$posX 0
}

$posX = -$step * 10
.myClass
  background-position: $posX 0

↓

$posX = -$step * 10
---------------------^
.myClass
  background-position: $posX 0
cannot perform -$step * 16

不等号と変数の間にスペースを入れるか、変数を( )で囲ってあげればOKです。

$posX = 100
.myClass
  background-position: - $posX 0

又は

$posX = 100
.myClass
  background-position: -($posX) 0

計算式の結果の不等号を変えるなら、計算式そのものを( )で囲ってあげると見やすいと思います。

$posX = -($step * 10)
.myClass
  background-position: $posX 0

Stylus + jade はいいぞ！