LESS 楽しいれす (^p^)   taiju @ kanazawa.js v1.7         kanazawa.js v1.7
自己紹介 @name:     "東 大樹 <Higashi Taiju>"; @current: "BaseLine, Inc."; @blog:    "あと味"; @twitter: "@taiju"; @facebook: "taiju...
アジェンダ        • LESS はやめぐり        • LESS is JavaScript        kanazawa.js v1.7
アジェンダ        • LESS はやめぐり        • LESS is JavaScript        kanazawa.js v1.7
LESSってなんれすか?変数、ミックスイン、演算、関数のような動的な振る舞いを、CSSに拡張したCSS拡張メタ言語。      kanazawa.js v1.7
LESSってなんれすか? Bootstrap   kanazawa.js v1.7
拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算       kanazawa.js v1.7
具体的に知りたいれす!     具体例を交えてLESSの「はやめぐり」をしましょう      kanazawa.js v1.7
拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算       kanazawa.js v1.7
変数CSSの記法/* CSS */#header {  color: #4D926F;}h2 {  color: #4D926F;}                    kanazawa.js v1.7
変数LESSの記法// LESS@color: #4D926F;#header {  color: @color;}h2 {  color: @color;}                   kanazawa.js v1.7
拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算       kanazawa.js v1.7
ミックスインCSSの記法/* CSS */#header {  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;}#footer {  bord...
ミックスインLESSの記法// LESS.rounded-corners (@radius: 5px) {  border-radius: @radius;  -webkit-border-radius: @radius;  -moz-bord...
拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算       kanazawa.js v1.7
ネストルールCSSの記法/* CSS */#header h1 {  font-size: 26px;  font-weight: bold;}#header p {  font-size: 12px;}#header p a {  text-...
ネストルールLESSの記法// LESS#header {  h1 {    font-size: 26px;    font-weight: bold;  }  p { font-size: 12px;    a { text-decorat...
拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算       kanazawa.js v1.7
関数と演算CSSの記法/* CSS */#header {  color: #333;  border-left: 1px;  border-right: 2px;}#footer {  color: #114411;  border-colo...
関数と演算LESSの記法// LESS@the-border: 1px;@base-color: #111;@red:        #842210;#header {  color: @base-color * 3; // #333  bor...
LESSを使用するscript要素とlink要素で使用する<link rel="stylesheet/less" type="text/css"href="styles.less"><script src="less.js" type="tex...
LESSを使用するlesscコマンドでcssにコンパイルする$ lessc styles.less > styles.cssただし、インストールやコマンドの実行に黒い画面が必要れすあと、毎回このコマンド打つのめんどいれす            ...
LESSを使用するGUIアプリを利用する          less.app                 SimpLESSCodeKit                  WinLess               kanazawa.js ...
LESSはやめぐりまとめ 今回の紹介したのは概要だけ詳しくはLESSのドキュメントで!  本家:   http://lesscss.org/  日本語訳: http://less-ja.studiomohawk.com/            ...
アジェンダ        • LESS はやめぐり        • LESS is JavaScript        kanazawa.js v1.7
LESSはJavaScriptれすgithubにソースが置いてあります     kanazawa.js v1.7
LESSはJavaScriptれす機能追加してpull requestしてる人も       kanazawa.js v1.7
LESSはJavaScriptれすJavaScriptだからなんとか読めそう!    見えるぞ・・・私にも敵が見える!       kanazawa.js v1.7
LESSはJavaScriptれす      JavaScriptの関数が使えます@var: `“hello”.toUpperCase() + ‘!’`;@height: `document.body.clientHeight`;       ...
全体まとめLESS 楽しいれす (^p^)     kanazawa.js v1.7
Upcoming SlideShare
Loading in …5
×

LESS楽しいれす(^q^)

5,293 views
5,173 views

Published on

kanazawa.js vol1.7 at kanazawakagekiza 15min

Published in: Technology
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
5,293
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

LESS楽しいれす(^q^)

  1. 1. LESS 楽しいれす (^p^) taiju @ kanazawa.js v1.7 kanazawa.js v1.7
  2. 2. 自己紹介 @name: "東 大樹 <Higashi Taiju>"; @current: "BaseLine, Inc."; @blog: "あと味"; @twitter: "@taiju"; @facebook: "taiju.higashi"; kanazawa.js v1.7
  3. 3. アジェンダ • LESS はやめぐり • LESS is JavaScript kanazawa.js v1.7
  4. 4. アジェンダ • LESS はやめぐり • LESS is JavaScript kanazawa.js v1.7
  5. 5. LESSってなんれすか?変数、ミックスイン、演算、関数のような動的な振る舞いを、CSSに拡張したCSS拡張メタ言語。 kanazawa.js v1.7
  6. 6. LESSってなんれすか? Bootstrap kanazawa.js v1.7
  7. 7. 拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算 kanazawa.js v1.7
  8. 8. 具体的に知りたいれす! 具体例を交えてLESSの「はやめぐり」をしましょう kanazawa.js v1.7
  9. 9. 拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算 kanazawa.js v1.7
  10. 10. 変数CSSの記法/* CSS */#header { color: #4D926F;}h2 { color: #4D926F;} kanazawa.js v1.7
  11. 11. 変数LESSの記法// LESS@color: #4D926F;#header { color: @color;}h2 { color: @color;} kanazawa.js v1.7
  12. 12. 拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算 kanazawa.js v1.7
  13. 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. 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. 15. 拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算 kanazawa.js v1.7
  16. 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. 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. 18. 拡張ってなんれすか?• 変数• ミックスイン• ネストルール• 関数と演算 kanazawa.js v1.7
  19. 19. 関数と演算CSSの記法/* CSS */#header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;} kanazawa.js v1.7
  20. 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. 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. 22. LESSを使用するlesscコマンドでcssにコンパイルする$ lessc styles.less > styles.cssただし、インストールやコマンドの実行に黒い画面が必要れすあと、毎回このコマンド打つのめんどいれす kanazawa.js v1.7
  23. 23. LESSを使用するGUIアプリを利用する less.app SimpLESSCodeKit WinLess kanazawa.js v1.7
  24. 24. LESSはやめぐりまとめ 今回の紹介したのは概要だけ詳しくはLESSのドキュメントで! 本家: http://lesscss.org/ 日本語訳: http://less-ja.studiomohawk.com/ kanazawa.js v1.7
  25. 25. アジェンダ • LESS はやめぐり • LESS is JavaScript kanazawa.js v1.7
  26. 26. LESSはJavaScriptれすgithubにソースが置いてあります kanazawa.js v1.7
  27. 27. LESSはJavaScriptれす機能追加してpull requestしてる人も kanazawa.js v1.7
  28. 28. LESSはJavaScriptれすJavaScriptだからなんとか読めそう! 見えるぞ・・・私にも敵が見える! kanazawa.js v1.7
  29. 29. LESSはJavaScriptれす JavaScriptの関数が使えます@var: `“hello”.toUpperCase() + ‘!’`;@height: `document.body.clientHeight`; kanazawa.js v1.7
  30. 30. 全体まとめLESS 楽しいれす (^p^) kanazawa.js v1.7

×