LESS 良いですよ! ホント LESS 良いですよ!! いや, ホント LESS 良いですよ!! ! っと3回言いましたが, LESS オススメです.

LESS は CSS をプログラムっぽく書けるようにするメタ言語です. 私は結構前から使っているのですが, 今ではもう LESS ナシのWeb サイト制作なんて考えられません.

ただただ, オススメだとか良いよーと言っても説得力がないと思うので, LESS の基礎が学べるサンプルを 8 個ほど用意してみました.

騙されたと思って使ってみて下さい. LESS の良さが分かると思います.

サンプルはすべて jsdo.it で作成しているので簡単に実行, 確認できます. よかったら fork して好き勝手イジってみて下さい.

Table of contents

1. 1. 変数を使ってみよう
2. 2. Mixins(ミックスイン)を使ってみよう
3. 3. Mixinsを関数化してみよう
4. 4. セレクタをネストして記述してみよう(入れ子構造)
5. 5. 計算式を使ってみよう
6. 6. カラー系関数を使ってみよう
7. 7. 数値系関数を使ってみよう
8. 8. スコープの仕組みを理解しよう
9. Sass はこちらへ

1. 変数を使ってみよう

プログラムにおける変数のような仕組みを使うことができます.

サンプルでは @bg-color に red を指定し, background-color に指定しています. コンパイル後に変数が指定した値に展開されているのがわかると思います.

Demo Download

Code

LESS

LESS のコードはこちら.

@bg-color: red;

.box {
  width: 100px;
  height: 100px;
  background-color: @bg-color;
}

CSS

変換後の CSS のコードはこちら.

.box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

up

2. Mixins(ミックスイン)を使ってみよう

LESS の大きな特徴として Mixins という仕組みがあります. これは一連のスタイルをまとめて, 使いまわしたり, 関数化して一部をパラメータ化することができます.

サンプルでは .simple-header という Mixins を作成し, h1 にミックスインしています. .simple-header のスタイルが h1 に展開されているのが分かると思います.

Demo Download

Code

LESS

LESS のコードはこちら.

@font-color: #444;

.simple-header {
  color: @font-color;
  text-shadow: 2px 2px 2px #aaa;
}

h1 {
  .simple-header;
}

CSS

変換後の CSS のコードはこちら.

.simple-header {
  color: #444444;
  text-shadow: 2px 2px 2px #aaa;
}
h1 {
  color: #444444;
  text-shadow: 2px 2px 2px #aaa;
}

up

3. Mixinsを関数化してみよう

Mixins は関数化することができます. 関数化することで格段に汎用性が増します.

サンプルでは, 2 で作成した .simple-header に @font-color という引数を渡せるようにしています. そして h1 で指定する際に .simple-header(red) という形でフォントカラーを指定しています.

ちゃんと展開後の値に反映されているのが分かると思います.

Demo Download

Code

LESS

LESS のコードはこちら.

.simple-header(@font-color) {
  color: @font-color;
  text-shadow: 2px 2px 2px #aaa;
}

h1 {
  .simple-header(red);
}

CSS

変換後の CSS のコードはこちら.

h1 {
  color: #ff0000;
  text-shadow: 2px 2px 2px #aaa;
}

up

4. セレクタをネストして記述してみよう(入れ子構造)

LESS ではセレクタを入れ子構造で指定することができます. わざわざ毎回親セレクタを指定しなくても良くなるのでコードがスッキリします.

スタイルの継承が明確になり, コードも短くなって良い感じ♪

サンプルでは, header を親として子どもに h1 と p を指定してスタイルを記述しています. section に関しても同様です.

キレイに展開されているのが分かると思います.

Demo Download

Code

LESS

LESS のコードはこちら.

header {
  h1 {
    font-size: 25px;
  }
  p {
    font-size: 16px;
    font-weight: bold;
  }
}

section {
  h1 {
    font-size: 20px;
  }
  p {
    font-size: 16px;
    &.special {
      color: blue;
      text-shadow: 0px 0px 2px black;
    }
  }
}

CSS

変換後の CSS のコードはこちら.

header h1 {
  font-size: 25px;
}
header p {
  font-size: 16px;
  font-weight: bold;
}
section h1 {
  font-size: 20px;
}
section p {
  font-size: 16px;
}
section p.special {
  color: blue;
  text-shadow: 0px 0px 2px black;
}

up

5. 計算式を使ってみよう

指定するプロパティに計算式を使うことができます. 四則演算はもちろんのこと, % や 16進数形式(#fff)のカラーも計算に使えます.

また, 変数も計算に使用することができます. これにより, 複数プロパティに関連する値を１つの変数で管理することができます.

Demo Download

Code

LESS

LESS のコードはこちら.

@bg-color: red;
@width: 100px;
@height: 100px;

.box {
  width: @width;
  height: @height;
  margin: 10px;
  background-color: @bg-color;
}

#box1 {
  background-color: @bg-color - #444;
}

#box2 {
  width: @width*2;
}

CSS

変換後の CSS のコードはこちら.

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ff0000;
}
#box1 {
  background-color: #bb0000;
}
#box2 {
  width: 200px;
}

up

6. カラー系関数を使ってみよう

LESS には色を変換するための関数が用意されています. 明度を上げ下げしたり, 色相を調整したりといったことができます.

今回のサンプルは spin 関数を使って色相を変化させています.

Demo Download

Code

LESS

LESS のコードはこちら.

@bg-color: red;

.box {
  width: 20px;
  height: 20px;
  margin: 5px;
  background-color: @bg-color;
}

#box1 { background-color: spin(@bg-color,  60); }
#box2 { background-color: spin(@bg-color, 120); }
#box3 { background-color: spin(@bg-color, 180); }
#box4 { background-color: spin(@bg-color, 240); }
#box5 { background-color: spin(@bg-color, 300); }
#box6 { background-color: spin(@bg-color, 360); }

CSS

変換後の CSS のコードはこちら.

.box {
  width: 20px;
  height: 20px;
  margin: 5px;
  background-color: #ff0000;
}
#box1 {
  background-color: #ffff00;
}
#box2 {
  background-color: #00ff00;
}
#box3 {
  background-color: #00ffff;
}
#box4 {
  background-color: #0000ff;
}
#box5 {
  background-color: #ff00ff;
}
#box6 {
  background-color: #ff0000;
}

up

7. 数値系関数を使ってみよう

計算式はもちろんですが, 数値系の関数もサポートされています.

サポートされている関数はこちら

• round … 引数の数値を四捨五入
• ceil … 引数の数値を切り上げ
• floor … 引数の数値を切り捨て
• percentage … 引数の浮動小数点数をパーセンテージ化

Demo Download

Code

LESS

LESS のコードはこちら.

@bg-color: red;
@size: 1.618px;

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: @bg-color;
}

#box1 {
  width: round(@size)*100;  // 2
}
#box2 {
  width: ceil(@size)*100;   // 2
}
#box3 {
  width: floor(@size)*100;  // 1
}
#box4 {
  width: percentage(0.5);   // 50%
}

CSS

変換後の CSS のコードはこちら.

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: #ff0000;
}
#box1 {
  width: 200px;
}
#box2 {
  width: 200px;
}
#box3 {
  width: 100px;
}
#box4 {
  width: 50%;
}

up

8. スコープの仕組みを理解しよう

LESS はプログラム言語と同じようにスコープという概念があります. 変数や Mixins は, まずローカル内, つまり自身のスコープに近いところから検索し 見つからなければ親スコープに遡って検索していきます.

この仕組を上手く使えば大規模なサイトでも安全にスタイリングすることができます.

下記のサンプルで, 同じ @bg-color でもスコープによって展開後の値が 違うのが分かるかと思います.

Demo Download

Code

LESS

LESS のコードはこちら.

@bg-color: red;

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: @bg-color;
}

header {
  @bg-color: green;
  
  .box {
    background-color: @bg-color;
  }
}

section {
  @bg-color: blue;
  
  .box {
    background-color: @bg-color;
  }
}

CSS

変換後の CSS のコードはこちら.

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: #ff0000;
}
header .box {
  background-color: #008000;
}
section .box {
  background-color: #0000ff;
}

up

Sassはこちらへ

Sassを覚えよう – CSS HappyLife

ちょっと古いですが現状, Sass については最も詳しくまとめてある日本語サイトだと思います.

効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！ | Webクリエイターボックス

みなさんご存知の Webクリエイターボックス! こちらでも分かりやすくまとめられています.

TEST CORDING

筋肉自慢の友人 @matoro さんが ちょくちょくまとめてくれているので参考にしてみて下さい.

up

現在 LESS の怒濤サンプル集作成中です!!

あともうちょいで公開できるので期待していて下さいな♪