CSS Nite in OSAKA, Vol.32 でやったやつです。

1. CSS は、もっと楽になる
LESS を活用してコーディング作業をシンプルに
増永 玲

2. ・増永 玲（マスナガ ¦ msng）といいます。
・ウェブのサービスを作って運営するなどしています。
・Twitter の bot を作ってます。
・『頭ん中』というブログを書いています。
http://www.msng.info/
・ / msng

3. 嫌いなもの
• 渋滞
• ホシブドウ
• 単純作業

4. 本日のおはなし
• CSS のここがめんどくさい
• そこで LESS ですよ
• LESS で何か書いてみよう
• Bootstrap が便利
• Bootstrap も LESS でできている
• まとめ

5. CSS 書くの
面倒くさく
ないですか？

6. #header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#nav {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.post-title {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

7. 何回書けば・・・

8. #content {
float: left;
}
#content .post {
margin-bottom: 20px;
}
#content .post .post-header {
overflow: hidden;
}
#content .post .post-header .post-title {
border-bottom: 1px solid #999;
}
#content .post .post-header .post-title p {
font-size: 1.5em;
}

9. どこまで伸びるの

10. #content a {
color: #33F;
}
#content a:hover {
color: #FFF;
background-color: #33F;
}
#sidebar .nav-list a {
color: #33F;
}
#sidebar .nav-list a:hover {
color: #FFF;
background-color: #33F;
}

11. やっぱ
「あ、
リンク色変更で」

12. 面倒くさく
ないですか？

13. いきなりですが
解決方法

14. 解決方法
1. 書く手間を減らす
書く
2. そもそも書かない

15. 書く手間を減らす
style.less style.css
魔法の小箱 LESS

16. 書く手間を減らす
• LESS ←今日はこれ
• Sass
• Stylus

17. LESSのいいところ
• Sass は
• Stylus
黒い画面でコマンドを・・・！

18. LESSのいいところ
LESS は
JavaScript を読み込むだけ

19. LESSでできること
変数が使える
@nice-blue: #5B83AD;
#header { color: @nice-blue; }
#nav { color: @nice-blue; }
#header { color: #5B83AD; }
#nav { color: #5B83AD; }

20. LESSでできること
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
#header { color: #6C94BE; }

21. LESSでできること
ミックスイン
.round {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#header { .round; }
#nav { .round; }

22. LESSでできること
#header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#nav {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

23. 実際にご覧ください
（後記：ここで実演しました）

24. 解決方法
1. 書く手間を減らす
2. そもそも書かない

25. そもそも書かない
Twitter Bootstrap

26. 実際にご覧ください
（後記：ここで実演しました）

27. 本日のまとめ
• 単純作業は機械に任せて
• クリエイティブな活動に
専念しよう

28. ありがとうございました。
参考資料 http://bit.ly/cno32