たとえばこんな感じのあるページのCSSがこのように書かれていたならば、
p.out { ... } div.out { ... } div.in { ... }
LESSならこんな風に書いてブロックで完結させることが可能だ。
body.one-page { div.out { ... } div.in { ... } } body.two-page { p.out { ... } }
このようにブロックごとにページを完結させると、CSSがどのページに当てられているか非常に分かりやすい。
しかし、上のようなコードをブロックで完結させるにはどうしたらよいのだろうか。
そのために以下の手順でやってみるといいんじゃないだろうか。
1. 空のブロックを用意する
body.one-page { } body.two-page { } p.out { } div.out { ... } div.in { ... }
2. 部分的にコメントアウトしてどのページのどの部分にCSSが当てられていたか確認する
body.one-page { } body.two-page { } // p.out { // } div.out { ... } div.in { ... }
3. 部分的にコメントアウトしてどのページのどの部分にCSSが当てられていたか確認する
body.one-page { } body.two-page { p.out { } } div.out { ... } div.in { ... }
1-3の繰り返し…
という風な感じでやっていくと、こんな感じでページごとにブロック完結したLESSコードが出来上がります。
body.one-page { div.out { ... } div.in { ... } } body.two-page { p.out { ... } }