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

かもメモ

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

Stylus インデントをミスすると危険があぶない!

stylus CSS

Stylusのインデントをミスすると意図せずセレクタの親指定が吹っ飛んでしまう場合があるっぽい!

p
  color: #444

#main
    .heading
      color: #0a9b94
  p
    color: #f2a620

インデントはスペース2つで統一しているつもりが。
間違えて.headingのインデントがスペース4つと深くなっています。
これがコンパイルされると...

p {
  color:  #444;
}
#main .heading {
  color: #0a9b94;
}
p {
  color: #f2a620;
}
/* ↑ #main p になってない!!!!  */

#mainを親にするセレクタはスペース4つと判断されるっぽい...
間違えてインデントが深くなっているセレクタ以降のセレクタ#mainを親にする指定が外れて、global直下になってしまい意図せずpタグのcolorを書き換えちゃってます。

中途半端なインデントミスだとエラーでコンパイルできないのですが、2倍などキレイに入れ子のインデントがズレてしまっているとコンパイルされてしまい、上記のようなバグを起こしてしまう可能性があります。
特に1つめの入れ子になるセレクタのインデントの深さには気をつけたほうが良さそうです☆