Your SlideShare is downloading. ×
  • Like
『CSS拡張言語、LESSを導入してみる』
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

『CSS拡張言語、LESSを導入してみる』

  • 2,810 views
Published

第58回「WEB TOUCH MEETING」で発表したときのスライドです。 …

第58回「WEB TOUCH MEETING」で発表したときのスライドです。
フォローアップ
https://gist.github.com/shuuheyhey/5792026

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,810
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
21
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS拡張言語、LESSを導入してみるBauhaus 寺澤脩平
  • 2. @shuuheyhey1986年生まれ元美容師でフリーランスのWebデザイナー。Webサイトや印刷物などを受注してます。Shuuhei Terasawaテ ラ サ ワ シ ュ ウ ヘ イ
  • 3. 今日お話しすること1. CSS拡張言語とは何か?3. LESSで出来ること4. ツールのご紹介5. LESSを使う上での注意点
  • 4. CSS拡張言語ってなーに?
  • 5. CSSにプログラミングの要素を加えることによって機能を拡張するもの
  • 6. LESSファイルからCSSファイルに変換して使います。
  • 7. PhotoshopのPSDファイルとjpgの関係みたいな感じ
  • 8. LESSを使うとどんなメリットが?
  • 9. 1. コード量が減る!2. メンテしやすい!3. 見やすい!
  • 10. LESSで出来ること
  • 11. プログラムでいうと...演算変数 関数(引数)+×−÷= ∼( )
  • 12. ネストLESS CSS#header {margin: 10px;}#header p {font-size:26px;}#header{margin: 10px;p{font-size: 26px;}}
  • 13. 変数LESS CSS#header {color: #4D926F;}h2 {color: #4D926F;}@color: #4D926F;#header {color: @color;}h2 {color: @color;}
  • 14. 関数(Mixin)LESS CSSh1 {width: 300px;color: #FFF;}.hoge( ){width: 300px;color: #FFF;}h1{.hoge}
  • 15. 関数(引数)LESS CSSh1 {width: 20px;}h2 {width: 90px;}.hoge(@hogehoge:20px; ){width: @hogehoge;}h1{.hoge}h2{.hoge(30px)}
  • 16. 演算LESS CSS#box {border-left: 1px;border-right: 4px;border-bottom: 4px;border-top: 1px;}@border: 2px;#box {border-left: @border - 1;border-right: @border + 2;border-bottom: @border * 2;border-top: @border / 2;}
  • 17. カラー関数明度(hue)彩度(saturation) 色相(lightness)色の演算もできる!
  • 18. 明度の計算ならlighten(@color, 10%);明度を10%明るくdarken(@color, 10%);明度を10%暗く
  • 19. 彩度の計算ならsaturate(@color, 10%);彩度を10%高くdesaturate(@color, 10%);彩度を10%低く
  • 20. 色相の計算ならspin(@color, 10);色相を10%大きくspin(@color, -10);色相を10%小さく
  • 21. マイナスでもいけるlighten(@color, -10%);saturate(@color, -10%);spin(@color, -10);明度彩度色相
  • 22. DEMO
  • 23. 覚えるのがめんどくさい . . .そんなときは
  • 24. http://sassme.arc90.com/
  • 25. importLESS@import "reset.less";@import "variables.less";@import "mixins.less";@import "layouts.less";@import "style.less";
  • 26. コンパイルするツールのご紹介
  • 27. フリーで使えるものだと
  • 28. KoalaWin,Mac,Linuxなどクロスプラットフォームで動くコンパイラ。対応言語は LESS, Sass(Compass)CoffeeScripthttp://koala-app.com/
  • 29. Crunch!クロスプラットフォームで動くAirアプリのコンパイラ。対応言語はLESSのみhttp://crunchapp.net/
  • 30. SimpLESShttp://wearekiss.com/simplessクロスプラットフォームで動くコンパイラ。対応言語はLESSのみDWだと編集できなくなる
  • 31. Winの方におすすめhttp://alphapixels.com/prepros/
  • 32. Preproshttp://alphapixels.com/prepros/
  • 33. PreprosHTTPサーバーを立ち上げてくれるLess/Sass/Scss/Stylus/Jade/Coffeescript/Haml/Markdown対応言語
  • 34. Macユーザーの方におすすめhttp://incident57.com/codekit/
  • 35. ・OS Xのみ対応・25$の有償アプリケーション・対応言語LESS, Stylus, Sass, Compass, Bourbon,Haml, Jade, Slim, CoffeeScript, Node.js,Uglify.jshttp://incident57.com/codekit/
  • 36. ・ブラウザのオートリロード・JSの結合、Minify・HTMLのライブラリ機能「Kit Language」http://incident57.com/codekit/
  • 37. LiveReload・正式版はOS Xのみ・Winはα版があります・ブラウザのオートリロード・対応言語 LESS, Stylus,Sass,    Compass, Haml, Jade, Slim, CoffeeScript$9.99http://livereload.com/
  • 38. Sublime Textだけでコンパイルすることも可能https://gist.github.com/shuuheyhey/5668133
  • 39. コンパイルせずにブラウザで動的に変換することも可能
  • 40. 設定の仕方
  • 41. 公式サイトからless.jsをダウンロードしてきてhttp://lesscss.org/
  • 42. <link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="less.js" type="text/javascript"></script>lessファイルとless.jsを読み込んで
  • 43. <link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="less.js" type="text/javascript"></script>lessファイルとless.jsを読み込んで
  • 44. <link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="less.js" type="text/javascript"></script>lessになってるので注意。
  • 45. あとはローカルホストを立ち上げればコンパイルしなくても反映してくれます
  • 46. 動的に変換する分パフォーマンスが悪くなるので、本番環境はコンパイルするのがベスト。
  • 47. IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。IE 9以下のセレクタ上限問題!4,096個以上は無視 される (;´Д`)
  • 48. そんなときはBless http://blesscss.com/
  • 49. 便利なツールのご紹介
  • 50. LESS 2 CSShttp://less2css.org/
  • 51. http://css.miugle.info/One Click CSS
  • 52. CSS Hathttp://csshat.com/
  • 53. 本日のまとめ・LESSを使うとCSSのコーディングを効率化できる・CSSファイル分割によるデメリットが解消できる・CSS拡張言語で書かれたフレームワークをカスタマイズできる
  • 54. ご静聴ありがとうございました