HTML5+α初心者勉強会でしゃべったです。

2. 自己紹介
なかしまこうき
前職: 組込系のSE
現職: フロントエンドエンジニア
kouki.nakashima
@kuronekomichael

3. LESSとは？

4. LESSとは？
の前に

5. CSSに
満足してますか？

6. ✔
CSSに満足してますか？
• よいところ
•容易
✗
•よくないところ
•冗長
•読みづらい
•再利用しづらい

7. CSSメタ言語
• いわゆる中間言語
• わかりやすく書いて、利用する時はcssに変換して使う
• 「アセンブラ書くの大変だから別の言語で書こうぜ」
みたいな感じ。（そんな大仰じゃないけど）
• JavaScriptにも同じ様な流れがきてる
• Haxe, CoffeeScript, JSX, TypeScript等など
• CSSメタ言語の選択肢も色々
• Sass(SCSS)、Stylus、LESS、TASS等など

8. 喧嘩は(・A・)ｲｸﾅｲ!!

9. LESSの導入

10. LESSの導入
(a) 動的:ページ表示時に変換して使う
or
(b) 静的:事前にcssに変換しておいて使う

11. LESSの導入:(a)動的に組み込む
• lessファイルと一緒に、less.js(http://lesscss.org/)をページに
組み込むだけ
• less.jsが自動的にlessを抽出→cssに変換して展開してくれる

12. • 長所：
• 超手軽
• 短所：
• コスト高い(変換コスト、通信コスト)
• IEだと31ファイル制限がある
LESSの導入:(a)動的に組み込む

13. LESSの導入:(b)静的に組み込む
• 事前にツールでless→cssファイルに変換しておく
• HTMLには今まで通り、cssとして組み込む
• ツールはCUIもGUI (LESS.app, WINLESS)も充実
• 長所：良いことしかない
• 短所：超が付くほど手軽じゃなくなる

14. LESSの機能

15. LESSの機能:(1/4)変数
//CSS
.feed-­‐detail
{
word-­‐wrap:
break-­‐word;
background-­‐color:
#fffbdc;
}
.service-­‐header
.posted-­‐title
{
background-­‐color:
#fffbdc;
}
//LESS
@bg-­‐color-­‐common:
#fffbdc;
.feed-­‐detail
{
word-­‐wrap:
break-­‐word;
background-­‐color:
@bg-­‐color-­‐common;
}
.service-­‐header
.posted-­‐title
{
background-­‐color:
@bg-­‐color-­‐common;
}

16. LESSの機能:(1/4)変数
//colors.less
@bg-­‐color-­‐common:
#fffbdc;
@bg-­‐color-­‐disable:
#ccc;
//detail.less
@import
"colors.less"
.feed-­‐detail
{
word-­‐wrap:
break-­‐word;
background-­‐color:
@bg-­‐color-­‐common:
}
//main.less
@import
"colors.less"
.service-­‐header
.posted-­‐title
{
background-­‐color:
@bg-­‐color-­‐common:
}

17. LESSの機能:(2/4)入れ子
//CSS
.service-­‐header
{
background-­‐color:
#cbe3dc;
}
.service-­‐header
.posted-­‐title
{
font-­‐weight:
bold;
background-­‐color:
#fffbdc;
}
.service-­‐header
.posted-­‐title
.date-­‐text
{
font-­‐size:
.9em;
color:
#cc6639;
}
.service-­‐header
.posted-­‐title
.date-­‐text:hover
{
color:
#99cc39;
}

18. LESSの機能:(2/4)入れ子
//LESS
.service-­‐header
{
.posted-­‐title
{
background-­‐color:
#fffbdc;
.date-­‐text
{
font-­‐size:
.9em;
color:
#cc6639;
}
.date-­‐text:hover
{
color:
#99cc39;
}
}
}

19. LESSの機能:(3/4)mixin
//CSS
.input-­‐container
{
-­‐o-­‐border-­‐radius:
5px;
-­‐ms-­‐border-­‐radius:
5px;
-­‐moz-­‐border-­‐radius:
5px;
-­‐webkit-­‐border-­‐radius:
5px;
border-­‐radius:
5px;
}
.user-­‐output-­‐box
{
-­‐o-­‐border-­‐radius:
10px;
-­‐ms-­‐border-­‐radius:
10px;
-­‐moz-­‐barder-­‐radius:
10px;
-­‐webkit-­‐border-­‐radius:
10px;
border-­‐radius:
10px;
}

20. LESSの機能:(3/4)mixin
//LESS
.b-­‐radius(@radius:
5px)
{
-­‐o-­‐border-­‐radius:
@radius;
-­‐ms-­‐border-­‐radius:
@radius;
-­‐moz-­‐border-­‐radius:
@radius;
-­‐webkit-­‐border-­‐radius:
@radius;
border-­‐radius:
@radius;
}
.input-­‐container
{
.b-­‐radius;
}
.user-­‐output-­‐box
{
.b-­‐radius(10px);
}

21. LESSの機能:(4/4)演算,関数
@color:
#666
-­‐
#222;
h2
{
color:
@color;
}
h2
{
color:
#444;
}
@color:
#3399cc;
.owner-­‐link
{
color:
@color;
}
.owner-­‐link:hover
{
color:
lighten(@color,
10%);
}

22. lighten(@color,
10%);
//
@colorより10%だけ明度が高い値
darken(@color,
10%);
//
@colorより10%だけ明度が低い値
saturate(@color,
10%);
//
@colorより10%だけ彩度を上げた値
desaturate(@color,
10%);
//
@colorより10%だけ彩度を下げた値
fadein(@color,
10%);
//
@colorより10%だけ透明度が高い値
fadeout(@color,
10%);
//
@colorより10%だけ透明度が低い値
fade(@color,
50%);
//
@colorを50%透過した値
spin(@color,
10);
//
@colorより10度だけ色相が大きい値
spin(@color,
-­‐10);
//
@colorより10度だけ色相が小さい値
mix(@color1,
@color2);
//
@color1と@color2をミックスした値

23. LESSってみた感想
•スキルレベルがバラバラのチームでも・・・
• 学習コストがほぼゼロで、立ち上がることができた
•SinglePageAppを３名が同時並行作業でも・・・
• ネストさせることでクラス名の衝突を回避できた
•LESSの全機能を無理に使う必要はない！
• 入れ子とmixinだけで、導入のメリットは充分にあった
• 変数、ビルトイン関数、演算は結局使ってない

24. Questions?

25. ご静聴ありがとう
ございました