Your SlideShare is downloading. ×
0
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」

1,133

Published on

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

No Downloads
Views
Total Views
1,133
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
5
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. 大阪Node学園八時限目 node.jsみちしるべ コーディングのための less - 基礎編 2013/10/26
  • 2. スライド内のリンクはクリックできます リンクはこの色です
  • 3. もくじ 1. Q 2. 自己紹介 3. lessとは 4. lessの基本ルール 5. Mixins 6. 数値演算 7. 関数 8. lessのコンパイル 9. Bootstrapのソースの読み方 10. Q?
  • 4. Q
  • 5. 初めに質問です 次のいずれかに当てはまりますか? lessというのに興味はあるけど使ったことはない cssが肥大化してメンテナンスが大変 Twitter Bootstrapをカスタマイジして使いたい SASS/Connpassがよくわからない
  • 6. もしどれかに当てはまったらこのスライドがお役に 立ちます。
  • 7. 自己紹介 渡辺俊輔 フリーランスWebエンザニア Blog : A Node in Nodes 大阪Node学園主催 趣味は読書と英語と瞑想 最近ザョギングを始めようかと思っています google+ 大阪node学園 質問、訂正などありましたら下記からどう twitter@craftgear craftgear@gmail.com
  • 8. lessとは
  • 9. cssプリプロセッサ less cssの記述とメンテナンスを効率化する Twitter Bootstrapであまりにも有名 cssをそのまま書いてもエラーにならない 基本は全てcssと同じ
  • 10. 最新は1.4.0 一部後方互換性がなくなっている @import-onceがなくなり@importに統一 セレクタの変数展開がシンプルに。変数の文字列展開と同じルールになった ブラウザ版にes5-shim.jsが同梱されなくなった strictMathモードの導入 数値計算するときには括弧が必要なモード。1.4.0ではデフォルトでオフ、今後デフォルトで音になる予定 strictUnitオプションの導入 単位が同じ場合にのみ演算可能にするモード。デフォルトでオフ、デフォルトでオンになる予定なし。 違う単位同士の計算方法が変わった (4px * 3em) / 4px used to equal 3px and it now equals 3em
  • 11. つまみ いがおいしい lessでややこしいのはMixinsとFunction わかるところだけ使えばいい
  • 12. lessを使うとcssを効率良く書ける
  • 13. lessの基本ルール
  • 14. 入れ子で記述する 1 //less 2 body { a { 3 color: #ffffff; 4 } 5 h1 { 6 color: #000000; 7 } 8 9 } 1 2 3 4 5 6 7 8 //css body a { color: #ffffff; } body h1 { color: #000000; }
  • 15. 同列のセレクタ pseudo要素、 追加のクラス指定など &を使う 1 //less 2 body { a { 3 &.thumb { 4 color: #ffffff; 5 } 6 &:hover { 7 color: #ffffff; 8 } 9 } 10 11 } 1 2 3 4 5 6 7 //css body a.thumb { color: #ffffff; } body a:hover { color: #ffffff; }
  • 16. MediaQueryも入れ子に出来る 1 //less 2 .one { @media (width: 400px) { 3 font-size: 1.2em; 4 @media print and color { 5 color: blue; 6 } 7 } 8 9 } 1 2 3 4 5 6 7 8 9 10 11 //css @media (width: 400px) { .one { font-size: 1.2em; } } @media (width: 400px) and print and color { .one { color: blue; } } exerpt from less document
  • 17. 変数 @マークをつけると変数名になる あらかじめ値を設定しておける 参照時はそのまま変数名を書く 1 2 3 4 5 6 7 8 9 10 //less @chetwode-blue: #3B71B1; @width: 960px; body#variable { width: @width; a { color: @chetwode-blue; } } 1 2 3 4 5 6 7 //css body#variable { width: 960px; } body#variable a { color: #3b71b1; }
  • 18. 同じ変数を複数宣言すると内側から順 番に参照される 変数のスコープは内から外へと順番に参照される 同じ名前の変数を宣言する場合は場所に注意<importする際など 1 2 3 4 5 6 7 8 9 10 11 12 //less @favorite-color: #993333; 1 body { 2 color: @favorite-color; 3 a { 4 @favorite-color: #333399; 5 color: @favorite-color; 6 } 7 li { 8 color: @favorite-color; 9 } 10 } //css body { color: #993333; } body a { color: #333399; } body li { color: #993333; }
  • 19. 変数の名前を変数にも出来る 1 2 3 4 //less @fnord: "I am fnord."; @var: "fnord"; content: @@var; 1 //CSS 2 content: "I am fnord.";
  • 20. 変数は先に宣言しなくても良い 1 2 3 4 5 6 7 8 //less .lazy-eval-scope { width: @var; @a: 9%; } 1 //css 2 .lazy-eval-scope { width: 9%; 3 4 } @var: @a; @a: 100%; exerpt from less document
  • 21. 変数の値を文字列内で展開する @の後を波括弧でくくってやると変数の値を文字列内に展開できる 1 //less 2 @base-url: "http://assets.fnord.com"; 3 background-image: url("@{base-url}/images/bg.png"); 1 //css 2 background-image: url("http://assets.fnord.com/images/bg.png");
  • 22. セレクタ名に変数を使う 文字列展開とやり方は同じ 1 2 3 4 5 //less @name: blocked; .@{name} { color: black; } 1 //css 2 .blocked { color: black; 3 4 }
  • 23. コメント // コメント /* コメント */ のニ種類が使える
  • 24. ファイルのインポート import で他のファイルをインポートできる cssファイルもlessファイルも同じようにインポートできる 拡張子をつけないとlessファイルとみなされ、内容が読み込まれる 1 @import 'style' cssをインポートする時には拡張子をつけるか、オプションでcssを指定する 1 @import 'style.css' 2 @import (css) 'style' cssをインポートするとcssのimport文として処理され、内容は展開されない トップレベルでのcss importはどこに書いてもコンパイル後に一番上に移動さ れる
  • 25. media queryを使って条件つき importができる スクリーンで幅が400ピクセル以上の時だけ読み込む例 1 @import "library.less" screen and (max-width: 400px);
  • 26. 応用編 &単独の使い方 以下省略 Namespaces 文字列のエスケープ less内でのjavascriptの実行 メディアクエリの指定に変数を使う
  • 27. htmlのように入れ子で記述する 便利な & 変数が使える
  • 28. Mixins
  • 29. Mixinsとは 他のクラスのプロパティを全て引き継 機能 角丸やClearfix、ドロップシャドウなど、記述量が多く、 共通して使われるプロパティを一箇所にまとめて記述できる たくさんルールがあるのでわからないところはこだわらない
  • 30. Mixinsのやり方 要素内にクラス名を書く だけ 1 2 3 4 5 6 7 //less .dotted-border { border: 1px dotted black; } .box { .dotted-border; } 1 2 3 4 5 6 7 //css .dotted-border { border: 1px dotted black; } .box { border: 1px dotted black; }
  • 31. clearfixの例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //less .clearfix() { &:before, &:after { content: " "; /* 1 */ display: table; /* 2 */ } &:after { clear: both; } } img { .clearfix; } 1 2 3 4 5 6 7 8 9 10 11 //CSS img:before, img:after { content: " "; /* 1 */ display: table; /* 2 */ } img:after { clear: both; }
  • 32. ()ありのMixinと()なしのMixin ()なしのMixinは通常のクラスと同じ、 ()ありの場合、そのクラス自体は出力されたCSSに含まれない
  • 33. 引数付きのMixin クラス内で使う数値や色などを場合によって変えたい場合に 1 2 3 4 5 6 7 8 // LESS .dotted-border(@width){ border: @width dotted black; } .box { .dotted-border(4px); } 1 //CSS 2 .box { border: 4px dotted #000000; 3 4 } この場合引数を指定しないとエラーになる 1 .box-error { .dotted-border(); //エラー 2 3 }
  • 34. 引数のデフォルト値付きのMixin 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // LESS .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { // フォル の5px る .rounded-corners; } #footer { //5pxの代わ 10px する .rounded-corners(10px); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //CSS #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
  • 35. 複数の引数をとる場合はセミコロンで区 切る グラデーションの例 1 2 3 4 5 6 7 8 9 10 11 12 //less .box{ .horizontal; } .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)) background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percen background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); background-repeat: repeat-x; } exerpt from twitter bootstrap
  • 36. 応用編 今回は省略 arguments値 同じ名前で引数の数が違うMixinを作れる Mixinsの中の変数も引き継がれる 可変長引数 Mixinsの中にMixinを入れることも出来る Mixinsに!importantをつけて呼び出すと、 mixins内部の全てプロパティに!importantがつく Mixinsの引数で振る舞いをかえる Guarded Mixins extends
  • 37. Mixinsを活用すると記述量を大幅に減らせる Mixinsを別ファイルに分離しておくと再利用が容 易
  • 38. 数値演算
  • 39. 四則演算が出来る 数値、色およびそれらを格納した変数に対して 1 //less 1 //CSS 2 body#operations { @width: 100%; 3 2 body#operations { @base_font_size: 36px; 4 border-right: 2em; 3 @h2_font_size: @base_font_size / 2 4 5 border-left: 2px; border-right: 1em + 1px; 6 5 } border-left: 1px + 1em; 7 6 body#operations a { a { 8 color: #ffff00; 7 color: (#FF0000 + #00FF00); 9 border: 5px; 8 border: (1px * 5); 10 } 11 9 } h1 { 12 10 body#operations h1 { width: @width / 2; 13 width: 50%; 11 font-size: @base_font_size * 2 14 font-size: 72px; 12 } 15 13 } h2 { 16 14 body#operations h2 { width: @width * 0.3; 17 font-size: @h2_font_size; width: 30%; 15 18 } 19 font-size: 18px; 16 20 } 17 }
  • 40. 数値、色には四則演算が出来る 単位は混ぜるのは混乱のもと
  • 41. 関数
  • 42. 関数とは lessの機能として用意されている、決まった処理をしてくれる命令のこと Mixinsと並ぶlessの便利機能 数値計算とか色の変更とか、たくさんあります 関数一覧を っとながめて使えそうなものを探すと良い
  • 43. 色の操作例 1 //less 2 body#color-function { @true_red: #FF0000; 3 1 //CSS a { 4 2 body#color-function a { //赤の彩度を50%下げる 5 color: #bf4040; color: desaturate(#FF0000, 50%) 3 6 4 } } 7 8 }
  • 44. 関数を使ったトーンの揃え方 ネタ元:Dribbble - My Secret for Color Schemes by Erica Schoonmaker fadeしてoverlayだとうまくいかなかったのでmix関数を使って元の色を75%、 色付け用の色を25%で混ぜあわせています。 1 2 3 4 5 6 7 8 9 //less @color1: #E04644; @color2: #FDE47F; @color3: #7CCCE5; @tint: #FF9C00; @ol1: mix(@color1, @tint, 75%); @ol2: mix(@color2, @tint, 75%); @ol3: mix(@color3, @tint, 75%); 1 2 3 4 5 6 7 8 9 10 //CSS body#tinted h1 { color: #e85c33; } body#tinted h2 { color: #fed25f; } body#tinted h3 { color: #9dc0ac; }
  • 45. lessのコンパイル
  • 46. コマンドのインストール 1 npm install -g less
  • 47. lessのコンパイル lesscコマンドを使う 1 lessc style.less 画面にずらずらと表示されるので、ファイルに書き出すにはリダイレクトを使う 1 lessc style.less > style.css
  • 48. CSSの圧縮 -x オプション、もしくは --yui-compre.line-numbersssion オプションをつける 1 lessc -x style.less > style.css
  • 49. 自動コンパイルとLiveReload GUIを使う方法 lessのwatch機能を使う方法 gruntを使う方法
  • 50. GUIコンパイラ Mac用GUI For Mac OS X http://incident57.com/less/ Windows用GUI - Windows GUI for less.js http://winless.org/ ライブリロード機能がない? その他のGUIツール https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js
  • 51. lessのwatch機能を使う方法 ブラウザでless.jsを読み込んで、URL末尾に #!watch をつける 詳細は省略
  • 52. gruntを使う方法 lessに限らず、jadeやcoffee-scriptなども一括して扱えるので便利 準備が面倒
  • 53. コーディング用ならGUIアプリで十分 Webアプリを書く場合自動コンパイルはサーノ側 でできるので必要ない
  • 54. lessベースのcssフレームワーク
  • 55. Bootstrap 一番有名なless cssフレームワーク twitter bootstrap ソース ソースを読むとlessのドキュメントよりも参考になります 1. まずは bootstrap.less を開きます。このファイルで他のファイルをインポート して、一つのファイルにしています。 2. bootstrap.less は上から順番に基本的な設定が書かれているファイルにな っています。個別のファイルに見つからない変数やMixinsは、それより先に読 み込まれているファイルに書かれています。 3. たとえば、一番上に書かれている variables.less にはそれ以降のファイルで 参照される変数がまとめて宣言してあります。 4. 後はカスタマイジしたい部分のファイルや、参考にしたいファイルを開いて、中 身を読んでいきます。
  • 56. その他のless cssフレームワーク Semantic UI http://semantic-ui.com/ InK - Interface Kit http://ink.sapo.pt/ Clearless by clearleft http://clearleft.github.io/clearless/
  • 57. Q?
  • 58. Thank you! photo by cygnus921 from flickr
  • 59. 宣伝 HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY) 半年ほど前に本を書きました

×