読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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

http://stylus-lang.com/img/stylus-logo.svg

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

NGな例

  1. 変数名のまま出力される
$posX = 100
.myClass
  background-position: -$posX 0

↓ 出力されるCSS

.myClass {
  background-position: -$posX 0
}
  1. コンパイルエラーになる
    -$変数名として計算しようとするとエラーになります。-$変数名が文字列になるからでしょう。
$posX = -$step * 10
.myClass
  background-position: $posX 0

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

OKな例

不等号と変数の間にスペースを入れるか、変数を( )で囲ってあげれば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 はいいぞ!