kanazawa.js vol1.7 at kanazawakagekiza 15min

1. LESS 楽しいれす (^p^)
taiju @ kanazawa.js v1.7
kanazawa.js v1.7

2. 自己紹介
@name: "東 大樹 <Higashi Taiju>";
@current: "BaseLine, Inc.";
@blog: "あと味";
@twitter: "@taiju";
@facebook: "taiju.higashi";
kanazawa.js v1.7

3. アジェンダ
• LESS はやめぐり
• LESS is JavaScript
kanazawa.js v1.7

4. アジェンダ
• LESS はやめぐり
• LESS is JavaScript
kanazawa.js v1.7

5. LESSってなんれすか？
変数、ミックスイン、演算、関数
のような動的な振る舞いを、
CSSに拡張したCSS拡張メタ言語。
kanazawa.js v1.7

6. LESSってなんれすか？
Bootstrap
kanazawa.js v1.7

7. 拡張ってなんれすか？
• 変数
• ミックスイン
• ネストルール
• 関数と演算
kanazawa.js v1.7

8. 具体的に知りたいれす！
具体例を交えて
LESSの「はやめぐり」をしましょう
kanazawa.js v1.7

9. 拡張ってなんれすか？
• 変数
• ミックスイン
• ネストルール
• 関数と演算
kanazawa.js v1.7

10. 変数
CSSの記法
/* CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
kanazawa.js v1.7

11. 変数
LESSの記法
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
kanazawa.js v1.7

12. 拡張ってなんれすか？
• 変数
• ミックスイン
• ネストルール
• 関数と演算
kanazawa.js v1.7

13. ミックスイン
CSSの記法
/* CSS */
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
kanazawa.js v1.7

14. ミックスイン
LESSの記法
// LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
kanazawa.js v1.7

15. 拡張ってなんれすか？
• 変数
• ミックスイン
• ネストルール
• 関数と演算
kanazawa.js v1.7

16. ネストルール
CSSの記法
/* CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
kanazawa.js v1.7

17. ネストルール
LESSの記法
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
kanazawa.js v1.7

18. 拡張ってなんれすか？
• 変数
• ミックスイン
• ネストルール
• 関数と演算
kanazawa.js v1.7

19. 関数と演算
CSSの記法
/* CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
kanazawa.js v1.7

20. 関数と演算
LESSの記法
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3; // #333
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300; // #114411
border-color: desaturate(@red, 10%); // #7d2717
}
kanazawa.js v1.7

21. LESSを使用する
script要素とlink要素で使用する
<link rel="stylesheet/less" type="text/css"
href="styles.less">
<script src="less.js" type="text/javascript"></script>
ただし、読み込みや実行に時間がかかるため、
実務には向かない使用方法れす
kanazawa.js v1.7

22. LESSを使用する
lesscコマンドでcssにコンパイルする
$ lessc styles.less > styles.css
ただし、インストールやコマンドの実行に
黒い画面が必要れす
あと、毎回このコマンド打つのめんどいれす
kanazawa.js v1.7

23. LESSを使用する
GUIアプリを利用する
less.app SimpLESS
CodeKit WinLess
kanazawa.js v1.7

24. LESSはやめぐりまとめ
今回の紹介したのは概要だけ
詳しくはLESSのドキュメントで！
本家: http://lesscss.org/
日本語訳: http://less-ja.studiomohawk.com/
kanazawa.js v1.7

25. アジェンダ
• LESS はやめぐり
• LESS is JavaScript
kanazawa.js v1.7

26. LESSはJavaScriptれす
githubにソースが置いてあります
kanazawa.js v1.7

27. LESSはJavaScriptれす
機能追加してpull requestしてる人も
kanazawa.js v1.7

28. LESSはJavaScriptれす
JavaScriptだからなんとか読めそう！
見えるぞ・・・私にも敵が見える！
kanazawa.js v1.7

29. LESSはJavaScriptれす
JavaScriptの関数が使えます
@var: `“hello”.toUpperCase() + ‘!’`;
@height: `document.body.clientHeight`;
kanazawa.js v1.7

30. 全体まとめ
LESS 楽しいれす (^p^)
kanazawa.js v1.7