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の値を変数として扱っています。