Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,803 views

Published on

kanazawa.js vol1.7 at kanazawakagekiza 15min

Published in: Technology

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

×