LESS CSS

LESSを使うと、CSSをプログラムのように変数や関数などを使ってCSSをシンプルに書くことができます。
LESS

node.jsで動かしますので、サーバーサイドの環境を整えましょう。

[vagrant@localhost ~]$ mkdir less_lessons
[vagrant@localhost ~]$ cd less_lessons
[vagrant@localhost less_lessons]$ node -v
v0.10.46
[vagrant@localhost less_lessons]$ npm -v
2.15.1
[vagrant@localhost less_lessons]$ sudo npm install -g less

lessからCSSを作るには、コマンド”lessc”となります。

[vagrant@localhost less_lessons]$ lessc -v
lessc 2.7.1 (Less Compiler)
[vagrant@localhost less_lessons]$ lessc styles.less styles.css

それでは、いくつか、記法をみてみましょう。

/*
*/

@h1-color: red;
@h2-color: darken(@h1-color, 10%);
@h1-size: 24px;
@h2-size: @h1-size - 4px;

@header: h;
@color: color;
@dir: "/img";

@{header}1 {
  font-size: @h1-size;
  @{color}: @h1-color;
}

@{header}2 {
  font-size: @h2-size;
  @{color}: @h2-color;
  background: url("@{dir}/bg.png")
}

CSSの値を変数として扱っています。