Category: LESS

LESSでは様々な使い方があります。

階層的な表現

header {
  font-size: 18px;
  a{
    color: red;
    &:hover {
      color: green;
    }
  }
}

.button {
  &-ok {
    color: green;
  }
  &-ng {
    color: red;
  }
}

ミックスイン。値を入れたいときは、引数を入力しましょう。

.my-mixin(@width:5px; @padding:7px){
  border: @width solid red;
  padding: @padding;
  margin: 7px;
}

h1 {
  font-size: 24px;
  .my-mixin;
}

h2 {
  font-size: 20px;
  .my-mixin(10px; 20px);
}

extend

.button {
  font-size: 14px;
  border: 1px solid black;
}
.button-ok {
  &:extend(.button);
  color: green;
}
.button-ng {
  &:extend(.button);
  color: red;
}

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