楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門
LESS 良いですよ! ホント LESS 良いですよ!! いや, ホント LESS 良いですよ!! ! っと3回言いましたが, LESS オススメです.
LESS は CSS をプログラムっぽく書けるようにするメタ言語です. 私は結構前から使っているのですが, 今ではもう LESS ナシのWeb サイト制作なんて考えられません.
ただただ, オススメだとか良いよーと言っても説得力がないと思うので, LESS の基礎が学べるサンプルを 8 個ほど用意してみました.
騙されたと思って使ってみて下さい. LESS の良さが分かると思います.
サンプルはすべて jsdo.it で作成しているので簡単に実行, 確認できます. よかったら fork して好き勝手イジってみて下さい.
Table of contents
- 1. 変数を使ってみよう
- 2. Mixins(ミックスイン)を使ってみよう
- 3. Mixinsを関数化してみよう
- 4. セレクタをネストして記述してみよう(入れ子構造)
- 5. 計算式を使ってみよう
- 6. カラー系関数を使ってみよう
- 7. 数値系関数を使ってみよう
- 8. スコープの仕組みを理解しよう
- Sass はこちらへ
1. 変数を使ってみよう
プログラムにおける変数のような仕組みを使うことができます.
サンプルでは @bg-color
に red
を指定し, background-color
に指定しています.
コンパイル後に変数が指定した値に展開されているのがわかると思います.
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; }
2. Mixins(ミックスイン)を使ってみよう
LESS の大きな特徴として Mixins という仕組みがあります. これは一連のスタイルをまとめて, 使いまわしたり, 関数化して一部をパラメータ化することができます.
サンプルでは .simple-header
という Mixins を作成し, h1 にミックスインしています.
.simple-header
のスタイルが h1 に展開されているのが分かると思います.
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; }
3. Mixinsを関数化してみよう
Mixins は関数化することができます. 関数化することで格段に汎用性が増します.
サンプルでは, 2 で作成した .simple-header
に @font-color
という引数を渡せるようにしています.
そして h1 で指定する際に .simple-header(red)
という形でフォントカラーを指定しています.
ちゃんと展開後の値に反映されているのが分かると思います.
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; }
4. セレクタをネストして記述してみよう(入れ子構造)
LESS ではセレクタを入れ子構造で指定することができます. わざわざ毎回親セレクタを指定しなくても良くなるのでコードがスッキリします.
スタイルの継承が明確になり, コードも短くなって良い感じ♪
サンプルでは, header
を親として子どもに h1
と p
を指定してスタイルを記述しています.
section
に関しても同様です.
キレイに展開されているのが分かると思います.
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; }
5. 計算式を使ってみよう
指定するプロパティに計算式を使うことができます. 四則演算はもちろんのこと, % や 16進数形式(#fff)のカラーも計算に使えます.
また, 変数も計算に使用することができます. これにより, 複数プロパティに関連する値を1つの変数で管理することができます.
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; }
6. カラー系関数を使ってみよう
LESS には色を変換するための関数が用意されています. 明度を上げ下げしたり, 色相を調整したりといったことができます.
今回のサンプルは spin 関数を使って色相を変化させています.
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; }
7. 数値系関数を使ってみよう
計算式はもちろんですが, 数値系の関数もサポートされています.
サポートされている関数はこちら
- round … 引数の数値を四捨五入
- ceil … 引数の数値を切り上げ
- floor … 引数の数値を切り捨て
- percentage … 引数の浮動小数点数をパーセンテージ化
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%; }
8. スコープの仕組みを理解しよう
LESS はプログラム言語と同じようにスコープという概念があります. 変数や Mixins は, まずローカル内, つまり自身のスコープに近いところから検索し 見つからなければ親スコープに遡って検索していきます.
この仕組を上手く使えば大規模なサイトでも安全にスタイリングすることができます.
下記のサンプルで, 同じ @bg-color
でもスコープによって展開後の値が
違うのが分かるかと思います.
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; }
Sassはこちらへ
Sassを覚えよう – CSS HappyLife
ちょっと古いですが現状, Sass については最も詳しくまとめてある日本語サイトだと思います.
効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単! | Webクリエイターボックス
みなさんご存知の Webクリエイターボックス! こちらでも分かりやすくまとめられています.
TEST CORDING
筋肉自慢の友人 @matoro さんが ちょくちょくまとめてくれているので参考にしてみて下さい.
現在 LESS の怒濤サンプル集作成中です!!
あともうちょいで公開できるので期待していて下さいな♪
LESS 学びませんか?
良い記事だと思ったらRT・はてブして頂けると幸いです.
『楽々レイアウト! 8個のサンプルで学ぶCSS メタ言語『LESS』入門』
http://t.co/7sfxKM5q
#web #css #less
LESS 学びませんか?
良い記事だと思ったらRT・はてブして頂けると幸いです.
『楽々レイアウト! 8個のサンプルで学ぶCSS メタ言語『LESS』入門』
http://t.co/7sfxKM5q
#web #css #less
LESS 学びませんか?
良い記事だと思ったらRT・はてブして頂けると幸いです.
『楽々レイアウト! 8個のサンプルで学ぶCSS メタ言語『LESS』入門』
http://t.co/7sfxKM5q
#web #css #less
[…] 楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 […]
LESS入門
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 | TM Life http://t.co/7MjGWZEg
良かったらぜひ!
[less][css]良かったらぜひ! / “楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 | TM Life” http://t.co/wxy4gaCc
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 | TM Life LESS 良いですよ! ホント LESS 良いですよ!! いや, ホント LESS 良いですよ!! ! っと3回言いましたが, LESS … http://t.co/EuzDvPR3
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 | TM Life
http://t.co/LBp8FGpf
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 | TM Life
http://t.co/LBp8FGpf
CSS:LESSのメリットを事例を使いわかりやすく紹介!
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 http://t.co/OTfXtphP @phi_jpさんから
“楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 | TM Life” http://t.co/HCNDb78m
CSS>気になるLESSを分かりやすく紹介!
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 http://t.co/5qz9GZvL @phi_jpさんから
CSS>気になるLESSを分かりやすく紹介!
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 http://t.co/5qz9GZvL @phi_jpさんから
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 http://t.co/YLhxKz3A @phi_jpさんから
[…] http://tmlife.net/web/less/8-sample-learn-css-less-guide.html […]
[…] 参考サイト これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応) 効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単! 楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 […]
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 http://t.co/YLhxKz3A @phi_jpさんから