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

futoase

よろしくお願いします。

俺 AdventCalendar 16日目

less を試す

less とは

  • CSSをそのまま書いていくと繰り返して同じ文をコピペ(色指定やborder-radiusなど)しなければならないが、lessは変数を扱うことができるので繰り返しの部分は代入を行うことでだいぶ楽になる。
  • 変数への代入以外にもclass名を利用してid名への代入を行うこともできる。class名は自動引数を取ることができるため、色指定だけ変更した形でほかはコピペ・・・のような形で運用できる。
  • 変数には四則演算を利用して数値であれば計算を行うことができる。RGB値の加算もできる。(#000000 + #003333 = #003333)
  • ネスト形式で書いていくことにより、CSSへのトランスレートで入れ子の形でセレクタを生成してくれる。

インストールしてみよう

  • インストールを行う場合、node.jsが必要。(npmはnode.js v0.6.3以降を利用するのであれば標準で入っているので改めてインストールする必要はない。v0.6.2以前のものを利用している場合はインストールしよう)
  • npm を利用してインストールを行う。
npm install less

less から css へのトランスレートを試す

  • 以下の形で less 形式で試しに書いてみる。
    • test.less というファイルで保存を行う。
@base_color: #333333;

#title div {
  .title-box {
    color: lighten(@base_color, 15%);
    font-size: x-large;
    .font;
  }
  .radius-box();
}

#body div {
  .radius-box(darken(@base_color, 15%));
}

.font(){
  font-family: "メイリオ", "MS Pゴシック", sans-serif; 
}

.radius-box (@color: @base_color, @radius: 5px){
  border-color: @color;
  background-color: @color + #666666;
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
  • トランスレートを行う。
lessc test.less > test.css
  • 結果。
#title div {
  border-color: #333333;
  background-color: #999999;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#title div .title-box {
  color: #595959;
  font-size: x-large;
  font-family: "メイリオ", "MS Pゴシック", sans-serif;
}
#body div {
  border-color: #0d0d0d;
  background-color: #737373;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

引数で注意する点

  • デフォルト値を設定できるが、キーワード引数で対応できるようにパーサが書かれていないようなので、よく使うパラメータを引数の先頭にもっていくようにしないといけない

感想

  • ネストした時にソースコード自体、CSSセレクタを視覚上でネストされたように見える(というかそういうように書いていく)ので把握しやすくなるんじゃないかな、と思った。
  • 一応lessそのものを解釈するようにサーバサイド側で対応できるようだけど(node.js)、cssへのトランスレータとしてだけ利用すればいいんじゃないかなぁと思った(coffeescriptのように)。

Copyright (c) 2013-2015 Keiji Matsuzaki