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

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

3,340

Published on

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

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,340
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
22
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×