by shigemk2

当面は技術的なことしか書かない

LESSファイルをリファクタリングしてみよう

たとえばこんな感じのあるページの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 {
    ...
  }
}