WP-D Fes #03 in GMO | 2015年3月7日開催の懇親会でLTに使用したものです。

1. 「SassだけじゃなくもっとLESSのことも見てください。」

2. @maki_saki平野正樹
WebSkill
LESSを使ってWEB制作するのが趣味です。
流行りのもの 技 術とか 大 好きで す！
大阪でWEBディレクターとかやってます。
前職はデザイナしてたのでデザインからコーディングまでやれます。
WordPressのテーマ作るのが好きです。
アニメやフィギュアが 好きな おっさんで す。
好きなキャラクター は 初 音ミクさんで す。
一人で な んで もやるからよくぼっちしてます。
（コンチ）
自己紹介

3. みなさんLESSってご存じですか？

4. 海外ではこんなに人気です。
Googleトレンド 2015年 ３月調べ
すべての国の検索ボリューム
LESS
Sass

5. 一方日本では…
Googleトレンド 2015年 ３月調べ
日本での検索ボリューム
LESS
Sass

6. 一方日本では…
Googleトレンド 2015年 ３月調べ
日本での検索ボリューム
LESS
Sass

7. 圧倒的
敗北感！！

8. Sassが普及している実感

9. 「Sass」の教科書が出ててたり

10. Googleが出したWeb Starter Kit

11. あのBootstrapも！！

12. あのBootstrapも！！

13. なんとWordPressでも

14. なんとWordPressでも

15. みんなLESSに対して
冷たすぎじゃ
ないですかね

16. LESSを使っていて受けた不当な扱い

17. 「LESSはいいから
Sass教えてください。」
20代 女性

18. 「ほら、この人…
LESSしか使えない人だから…」
30代 男性

19. 30代 女性
「LESSは未来ないでしょ」

20. 「えっ、LESSとかキモいじゃん」
20代 女性

21. 「これSassで
作り直してもらえます？」
30代 男性

22. 「みんなSass使うんだからさ、
LESSなんてやめよ。なっ。」
30代 男性

23. 「けどみんなLESSの事知らないですよね」

24. は簡単
JS読み込むだけですよ。
script src=”//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js”/script
導入が簡単です

25. は簡単
JS読み込むだけですよ。
script src=”//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js”/script
導入が簡単です

26. CSSをコンパイルしてくれる
ものもあります。
Prepros
無料です！
WindowsもMacもいけます。

27. 書き方はの違いはこんな感じ！
- 変 数 の 場 合 -
SASS LESS
$key_color:#DF5496; @key_color:#DF5496;

28. 書き方はの違いはこんな感じ！
- E X T E N D の 場 合 -
SASS LESS
.box{
color:#FFF;
background-color: #000;
}
.box2{
width:480px;
@extend .box;
}
.box{
color:#FFF;
background-color: #000;
}
.box2{
width:480px;
:extend(.box);
}

29. 書き方はの違いはこんな感じ！
- M I X I N の 場 合 -
SASS LESS
@mixin color($color:#000){
color:$color;
}
.text{
@include color(#333);
}
.color(@color:#000){
color:@color;
}
.text{
.color(#333);
}

30. 書き方はの違いはこんな感じ！
- M I X I N の 場 合 -
LESS
.color{
color:#FFF;
background-color: #000;
}
.text{
.color;
}

31. 書き方はの違いはこんな感じ！
この短い
書き方が好き
- M I X I N の 場 合 -
LESS
.color{
color:#FFF;
background-color: #000;
}
.text{
.color;
}

32. 「ねっ、簡単でしょ！」

33. これでみんな
明 日 か ら
使ってくれると
信じています
LESS

34. ご清 聴ありがとうございました。
@maki_saki