「LESS」ことはじめ

851 views

Published on

Creator's village in EHIMEの資料

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
851
On SlideShare
0
From Embeds
0
Number of Embeds
107
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

「LESS」ことはじめ

  1. 1. 『LESS』事はじめ Creator’s village in Ehime 〜 2012 初夏 〜12年12月17日月曜日
  2. 2. 自己紹介! アイムービックで Webシステム作ってます。 四国GTUG所属。 骨折り損のくたびれもうけ http://blog.bornknow.com/ @bornknow10812年12月17日月曜日
  3. 3. 今日のお話 CSS拡張メタ言語について LESSの導入方法 LESSの書きかた まとめ12年12月17日月曜日
  4. 4. CSS拡張メタ言語 について12年12月17日月曜日
  5. 5. CSS拡張メタ言語?12年12月17日月曜日
  6. 6. メタ言語 → 言語を定義するための言語 何?意味がわからない12年12月17日月曜日
  7. 7. 例えば、Zen-coding Zen-coding input:text HTML <input type=”text”/> HTMLという言語を定義するための Zen-codingという言語12年12月17日月曜日
  8. 8. じゃあ、あらためて CSS拡張メタ言語をご紹介12年12月17日月曜日
  9. 9. Sass/SCSS12年12月17日月曜日
  10. 10. Sass(Syntactically Awesome Stylesheets) SCSS(Sassy CSS) Rubyで実装されたコンパイラ SassはHAML形式で記述 SCSSはCSS形式で記述12年12月17日月曜日
  11. 11. ちなみにHAML形式ってこんなの HTML/XHTMLを生成するための マークアップ言語 インデントや簡略構文によって記述 !!! %html %head %title Hello, Haml! %body #header %h1 Hello, Haml! #content12年12月17日月曜日
  12. 12. LESS12年12月17日月曜日
  13. 13. 今回お話するやつ JavaScriptで実装された コンパイラ CSS形式で記述 詳細はのちほど12年12月17日月曜日
  14. 14. Stylus12年12月17日月曜日
  15. 15. node.js版Sassの作者が 開発 node.jsで実装された コンパイラ CSS形式で記述12年12月17日月曜日
  16. 16. この他にも、TASS(JavaScript)とか PCSS(PHP)などがあります。12年12月17日月曜日
  17. 17. いろいろあるよね どうして LESSなの?12年12月17日月曜日
  18. 18. Googleトレンド 人気がある12年12月17日月曜日
  19. 19. CSS形式だから ぱっと見て 分かりやすい!12年12月17日月曜日
  20. 20. JavaScriptで動く! 環境構築しなくても 大丈夫!12年12月17日月曜日
  21. 21. 人 気 :大 学習コスト:低 導入コスト:低 だから、 LESS!!12年12月17日月曜日
  22. 22. 導入方法12年12月17日月曜日
  23. 23. 方法は3つ!12年12月17日月曜日
  24. 24. JavaScript 変換用のJavaScriptファイル を読み込むだけ12年12月17日月曜日
  25. 25. 本家サイトへ12年12月17日月曜日
  26. 26. ここから ダウンロード12年12月17日月曜日
  27. 27. 使用例 <!-- LESSファイルを指定する --> <link rel="stylesheet/less" type="text/css" href="styles.less"> <!-- コンパイラを読み込む --> <script src="less.js" type="text/javascript"></script>12年12月17日月曜日
  28. 28. メリット 導入が簡単12年12月17日月曜日
  29. 29. デメリット つねに変換が発生するため 重い クライアントの負荷が上がる 納品がless形式になる12年12月17日月曜日
  30. 30. node.js node.jsのlesscを使ってCSSに 変換する12年12月17日月曜日
  31. 31. node.js 日本ユーザー グループ12年12月17日月曜日
  32. 32. 以下、略12年12月17日月曜日
  33. 33. 使用例 通常 # lessc hogehoge.less > hogehoge.css CSSを圧縮する場合 # lessc --compress hogehoge.less > hogehoge.css12年12月17日月曜日
  34. 34. メリット Web上で読み込むのはCSSに なる クライアントの負荷が下がる12年12月17日月曜日
  35. 35. デメリット 導入が大変 (LESSのうまみが減る) 環境によっては別途サーバー が必要 修正ごとに変換が必要する12年12月17日月曜日
  36. 36. アプリ アプリを使って変換する Windows winless Mac LESS.app12年12月17日月曜日
  37. 37. http:// incident57.com/ less/12年12月17日月曜日
  38. 38. http:// winless.org/12年12月17日月曜日
  39. 39. LESSファイルを 指定12年12月17日月曜日
  40. 40. エディタで保存12年12月17日月曜日
  41. 41. CSSファイルが 生成される12年12月17日月曜日
  42. 42. メリット Web上で読み込むのはCSSに なる クライアントの負荷が下がる LESSからの変換を意識しない でいい12年12月17日月曜日
  43. 43. デメリット とくになし12年12月17日月曜日
  44. 44. 書きかた12年12月17日月曜日
  45. 45. 変数 ミックスイン その1 ミックスイン その2 ネスト 演算 関数12年12月17日月曜日
  46. 46. LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; }12年12月17日月曜日
  47. 47. CSS #header { color: #4D926F; } h2 { color: #4D926F; }12年12月17日月曜日
  48. 48. 変数 ミックスイン その1 ミックスイン その2 ネスト 演算 関数12年12月17日月曜日
  49. 49. LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); }12年12月17日月曜日
  50. 50. 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; }12年12月17日月曜日
  51. 51. 変数 ミックスイン その1 ミックスイン その2 ネスト 演算 関数12年12月17日月曜日
  52. 52. LESS .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } #header { .box-shadow(2px, 2px); } #footer { .box-shadow(2px, 5px, 2px); }12年12月17日月曜日
  53. 53. CSS #header { box-shadow: 2px 2px 1px #000; -moz-box-shadow: 2px 2px 1px #000; -webkit-box-shadow: 2px 2px 1px #000; } #footer { box-shadow: 2px 5px 2px #000; -moz-box-shadow: 2px 5px 2px #000; -webkit-box-shadow: 2px 5px 2px #000; }12年12月17日月曜日
  54. 54. 変数 ミックスイン その1 ミックスイン その2 ネスト 演算 関数12年12月17日月曜日
  55. 55. LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }12年12月17日月曜日
  56. 56. #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; }12年12月17日月曜日
  57. 57. 変数 ミックスイン その1 ミックスイン その2 ネスト 演算 関数12年12月17日月曜日
  58. 58. LESS @base-border : 1px; @base-color : #111111; #header { border-top: @base-border; border-left: @base-border * 2; border-right: @base-border * 2; border-bottom: @base-border * 3; } #footer { color: @base-color + #003300; }12年12月17日月曜日
  59. 59. CSS #header { border-top: 1px; border-left: 2px; border-right: 2px; border-bottom: 3px; } #footer { color: #113311; }12年12月17日月曜日
  60. 60. 変数 ミックスイン その1 ミックスイン その2 ネスト 演算 関数12年12月17日月曜日
  61. 61. LESS @red : #842210; #footer { border-color: desaturate(@red, 10%); }12年12月17日月曜日
  62. 62. CSS @red : #842210; #footer { border-color: #7D2717; }12年12月17日月曜日
  63. 63. // @colorより10%明度が高くする lighten(@color, 10%); // @colorより10%明度を低くする darken(@color, 10%); // @colorに10%の彩度を追加する saturate(@color, 10%); // @colorから10%の彩度を削除する desaturate(@color, 10%); // @color1 と @color2 をミックスする mix(@color1, @color2);12年12月17日月曜日
  64. 64. // @colorから10%透明度を高くする fadein(@color, 10%); // @colorから10%透明度を低くする fadeout(@color, 10%); // @colorの50%の透明度にする fade(@color, 50%); // @colorから10度色相が大きくする spin(@color, 10); // @colorから10度色相が小さくする spin(@color, -10);12年12月17日月曜日
  65. 65. // @colorの色相チャネルを取得する hue(@color); // @colorの彩度チャネルを取得する saturation(@color); // @colorの明度チャネルの値を取得する lightness(@color); // @colorの透明度チャネルの値を取得する alpha(@color);12年12月17日月曜日
  66. 66. 他にもいくつか できることがあります。12年12月17日月曜日
  67. 67. 効率的に学ぶなら12年12月17日月曜日
  68. 68. 本家サイト12年12月17日月曜日
  69. 69. Twitter Bootstrap12年12月17日月曜日
  70. 70. github12年12月17日月曜日
  71. 71. less配下にあるよ12年12月17日月曜日
  72. 72. まとめ12年12月17日月曜日
  73. 73. LESSに限らず、 CSSメタ拡張言語は便利! 作業を効率化するならぜひ できればチームで統一してね!12年12月17日月曜日
  74. 74. バグに ちょっとだけ 気をつけて。12年12月17日月曜日
  75. 75. ご清聴 ありがとうございました。12年12月17日月曜日

×