1. LESS使ってますか？
㈱シーエー・アドバンス
仲里 淳矢

2. アジェンダ
①LESSの紹介
②導入方法
③使い方

3. ①LESSの紹介

4. はじめに
• 最近、CSSメタ言語LESSとかSassとかいろい
ろ流行ってるよね！
• でも、既存のシステムがあると、なかなか使う
機会がない。。。
• けど、新規立ち上げとかで、使うかもしれない
ので、勉強しとこ！ってことで、スライドにまと
めてみました。

5. LESSってなぁに？
• CSSを記述するためのメタ言語
• カラーコードとかを変数で持てる
– e.g. @mycolor: #C0FFEE;
• ロジカルな記述ができる
– 関数、入れ子、数値計算等
• Node.jsのexpressやTwitter Bootstrapが採用
• 競合
– Sass, Stylus, Tass など

6. ③導入方法

7. インストール方法と使い方 ～その①～
※前提として、Rubyの開発環境が構築されていること！
# インストールコマンド
% gem install less
# コンパイルコマンド
% lessc example.less > example.css
あとは、出力したCSSを設置するだけ！

8. インストール方法と使い方 ～その②～
※『less.js』を保存した後、
# wget http://cloud.github.com/downloads/cloudhead/less.js/less-1.3.1.min.js
# ln –s less-1.3.1.min.js less.js
htmlファイル側で、『less.js』 と 『*.less』 と読み込み！

9. ③使い方

10. 変数 について
• カラーコードやサイズを同じ値で統一したい時ってありますよね。
そういうとき、変数で定義しておくと便利！
• コードが少なくなって、生産性が向上するし、サイトの統一感も出
しやすいですよね！

11. Mixin について
• 同じ処理を繰り返し書きたくない時ってありますよね？
• そういうときは、下記のようにMixinを使いましょう。
– まあ、Mixinは関数みたいなものです
丸っこい区切りが作り放題！

12. Mixin について
• セパレータ用のMixinを作ったり、テキストシャドウを定義しておけ
ば、資産として、使いまわせますよね！

13. 入れ子（ネスト） について
• 構造化されたレイアウトを表現するには、LESS はうって
つけです！とりあえず、以下を見ていただければ、わかる
かと思います。
• CSSの冗長な書き方が、すっきりしてますよね！？

14. オペレーションと関数化
• LESSを使えば、簡単な数値計算をすることができます。
• プログラマブルにCSSが組めるので、いろいろ応用が効
くかもしれません！？

15. Color funcｔions
• 定義した色に対して、割合で色を変更する関数です！
• 整数スケールで色の明暗を変更したり、アルファかけたり
できます。

16. まとめ
• LESSを使用することにより、CSSを組む時、変数が
使えたり、関数が組めたりといいことずくめ！
• 変数や関数が作れるので、特定のデザインを資産
として、プログラマブルに残すことができる！
• あと、流行ってるので、抑えておこうね♪

17. 参考
• LESS « The Dynamic Stylesheet language
– http://lesscss.org/
• CSSをシンプルに書くことができるLESS使ってみた | webOpixel
– http://www.webopixel.net/html-css/503.html
• LESS初心者向けのナニカ – Archiva
– http://archiva.jp/web/html-css/less_started.html

18. 謝辞
• こちら、背景画像で使用させていただきました
• Subtle Patterns
– Creative Commons Attribution-ShareAlike 3.0 Unported License
– http://subtlepatterns.com/