WordBench Nagoya 5月LESSをがんばって使ってみた熊上 隆オーサリングツールはNetBeansを使っています。
自己紹介熊上 隆(くまがみ たかし)・某企業所属 Webディレクター (6月末に退職予定)・WordPressスキルは下の中~下の上くらい・WBNは2012年3月より参加中・一応、WBNのFacebook・Twitter中の人Twitter:@...
LESSをがんばって使ってみた■LESSってなんぞ?■基本導入■こんなこともできまふ
LESSをがんばって使ってみた■LESSってなんぞ?■基本導入■こんなこともできまふ
LESSってなんぞ?The dynamic styleseet language「LESSは変数、ミックスイン、演算、そして関数のような動的な処理をCSSに追加拡張できます」(http://less-ja.studiomohawk.com/ )...
LESSってなんぞ?■変数変数を定義して、当て込むような記述ができます。//書き方@kuma: #999999;#header {background: @kuma;}//コンパイル後#header {background: #999999;}
LESSってなんぞ?■ミックスインクラス名をプロパティっぽく書いて、他のプロパティに埋め込む。//コンパイル後.hako {border: 1px #666666 solid;background: #999999;}.txt_area {bo...
LESSってなんぞ?■入れ子セレクタの中にセレクタを入れて、継承を指定。//書き方#header {h1 {font-size: 26px;font-weight: bold;}p {font-size: 12px;a {text-decola...
LESSってなんぞ?■関数と演算演算したり関数計算させたりすることができる。//書き方@the-border: 1px;@base-color: #111111;@red: #842210;#header {color: @base-color...
LESSってなんぞ?■関数と演算(カラー関数)◎desaturate・・・彩度を低くする saturate・・・彩度を高くする#footer {border-color: desaturate(@red, 10%);}@redより10%彩度を低...
LESSってなんぞ?■関数と演算(カラー関数)◎fadein・・・透明度を減らす fadeout・・・透明度を増やす@base-color: rgba(204, 65, 30, 0.5);#header {background: fadein(...
LESSってなんぞ?■関数と演算(Math関数)◎round(数値)・・・四捨五入  ceil(数値)・・・切り上げ floor(数値)・・・切り捨て   percentage(数値)・・・%に表示切り替え@suuji: 0.2;@base-c...
LESSをがんばって使ってみた■LESSってなんぞ?■基本導入■こんなこともできまふ
基本導入①.lessスタイルシートへのリンク(と、拡張子変更)<link rel=“stylesheet/less” type=“text/css” href=“styles.less”>②less.jsへのリンク<script type=“t...
LESSをがんばって使ってみた■LESSってなんぞ?■基本導入■こんなこともできまふ
①ウォッチモードブラウザ上のURLのお尻に#!watchとつけてあげて、一度更新。その後、LESSファイルを更新して保存すると・・・更新(F5とか)をしなくても、勝手にLESSの変更内容が表示されるようになります。※HTMLファイルを編集した場...
!!!!Warning!!!!だんだん難しくなってきますナ、ナンダッテー!
②変数を使って変数を定義変数を使って、別の変数を定義してあげることができます。//コンパイル後#header { color:#6c94be; }//書き方@blue: #5b83ad;@light-blue: @blue + #111111;...
③ミックスインと引数ミックスインに引数を持たせて、関数のように扱うことができます。//コンパイル後#header {border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius...
③ミックスインと引数//コンパイル後.box-shadow2 {box-shadow: box-shadow(2px 5px10px 12px #888);-moz-box-shadow: box-shadow(2px5px 10px 12px...
③ミックスインと引数ミックスインの第1引数に、条件っぽいものを設定することができます。//コンパイル後.boxbg {background: #666666;display: block;}// ※@switchの値を「dark」にした場合.b...
③ミックスインと引数本物の(?)条件分岐もできます。//コンパイル後. kyoutyou {font-size: 20px;background: #ff0000;}// @kuma: 15px の場合. kyoutyou {font-size...
③ミックスインと引数本物の(?)条件分岐もできます。// 条件分岐は、以下のようなオプション?を持っています。.mixin (@kuma) when (@kuma > 10), (@kuma < 10) { …… } // 「,」でorのような...
③ミックスインと引数パラメータの個数で条件分岐させる、という方法まであります。//コンパイル後.kuma {color: #990000;}.kuma2 {color: # 009900;background:#000099;}//書き方.bg...
④入れ子と変数入れ子の中に書いた変数を、上手に上書きしたり継承できます。//コンパイル後.foo {background : #ff0000;}.foo .bar {background : #0000ff;}.foo .bar2 {backg...
⑥名前空間なるもの別の場所で、クラスやIDの中身を呼び出せる。//コンパイル後#header a {color: #FFa500;display: block;border: 1px solid #000000;background: #666...
そのほか勉強中にわかったこととか……ホホゥ
動作環境・ローカルでは、GoogleChromeでは動きませんでした! ⇒Macでは、ターミナルを立ち上げ、以下のように入れてあげてChromeを立ち上げると、動くようです。/Applications/Google Chrome.app/Con...
どんな場面で使えそう?①ちょー長いCSS書くときとりあえずソースコードが短くなることは分かりました。そこまで長いCSS ……、書いたことナイケド 。②ベンダープレフィックスを大量に書かないといけなさそうな場合いちいちベンダープレフィックスを何度...
「コンパイル」って?せっかく書いたLESSのソースコードですが、最後はコンパイルしてプレーンなCSSに変えてしまうことが多いようです。理由は、JavaScriptのままだと動きが遅い、というのが要因にあるようです。……で 実際の開発では・コンパ...
そのほかさいごに!ナニナニ?
さいごはWordBench ……らしくWordPressに組み込めるの?クミコンデヨー
WordPressに組み込めるの?ありました!組み込めます!キタ━━━(゚∀゚) !!━━━
WordPressに組み込めるの?◎LESSをサポートしているプラグイン類・JetPack by WordPress.com(の機能の一部)・WP-LESS・WP Booster ……(の機能の一部に搭載されているとかいないとか ?)・BW L...
拙い発表でしたが、ありがとうございました。マタネー!
Upcoming SlideShare
Loading in...5
×

Less

628

Published on

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

No Downloads
Views
Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Less

  1. 1. WordBench Nagoya 5月LESSをがんばって使ってみた熊上 隆オーサリングツールはNetBeansを使っています。
  2. 2. 自己紹介熊上 隆(くまがみ たかし)・某企業所属 Webディレクター (6月末に退職予定)・WordPressスキルは下の中~下の上くらい・WBNは2012年3月より参加中・一応、WBNのFacebook・Twitter中の人Twitter:@imagamukFacebook:https://www.facebook.com/takashi.kumagamiBlog:http://kumamimumemo.info/
  3. 3. LESSをがんばって使ってみた■LESSってなんぞ?■基本導入■こんなこともできまふ
  4. 4. LESSをがんばって使ってみた■LESSってなんぞ?■基本導入■こんなこともできまふ
  5. 5. LESSってなんぞ?The dynamic styleseet language「LESSは変数、ミックスイン、演算、そして関数のような動的な処理をCSSに追加拡張できます」(http://less-ja.studiomohawk.com/ )・変数 ・ミックスイン(Mixin)・入れ子 ・関数と演算
  6. 6. LESSってなんぞ?■変数変数を定義して、当て込むような記述ができます。//書き方@kuma: #999999;#header {background: @kuma;}//コンパイル後#header {background: #999999;}
  7. 7. LESSってなんぞ?■ミックスインクラス名をプロパティっぽく書いて、他のプロパティに埋め込む。//コンパイル後.hako {border: 1px #666666 solid;background: #999999;}.txt_area {border: 1px #666666 solid;background: #999999;……}//書き方.hako {border: 1px #666666 solid;background: #999999;}.txt_area {.hako;……}
  8. 8. LESSってなんぞ?■入れ子セレクタの中にセレクタを入れて、継承を指定。//書き方#header {h1 {font-size: 26px;font-weight: bold;}p {font-size: 12px;a {text-decolation: none;&:hover {border-width: 1px;}}}}//コンパイル後#header h1 {font-size: 26px;font-weight: bold;}#header p {font-size: 12px;}#header p a {text-decolation: none;}#header p a:hover {border-width: 1px;}
  9. 9. LESSってなんぞ?■関数と演算演算したり関数計算させたりすることができる。//書き方@the-border: 1px;@base-color: #111111;@red: #842210;#header {color: @base-color * 3;border-left: @the-border;border-right: @the-border * 2;}#footer {color: @base-color + #003300;border-color: desaturate(@red, 10%);}//コンパイル後#header {color: #333333;border-left: 1px;border-right: 2px;}#footer {color: #114411;border-color: #7d2717;}※desaturate・・・彩度を低くする saturate・・・彩度を高くする→カラー関数
  10. 10. LESSってなんぞ?■関数と演算(カラー関数)◎desaturate・・・彩度を低くする saturate・・・彩度を高くする#footer {border-color: desaturate(@red, 10%);}@redより10%彩度を低くして表示、という意味。◎spin・・・色相を変える#header {border-color: spin(@red, 10);}@redから色相を10度ずらして表示、という意味。※spin関数は、逆の角度に向かいたいときはマイナス値を指定してあげます。◎darken・・・明度を低くする lighten・・・明度を高くする#header {border-color: darken(@base-color, 20%);}@base-colorより20%明度を低くして表示、という意味。
  11. 11. LESSってなんぞ?■関数と演算(カラー関数)◎fadein・・・透明度を減らす fadeout・・・透明度を増やす@base-color: rgba(204, 65, 30, 0.5);#header {background: fadein(@base-color, 20%);}@base-colorより透明度を20%減らして表示、という意味。◎fade・・・透明化させる@base-color:#330000;#header {background: fade(@base-color, 20%);}@base-colorを20%透明化の状態で表示、という意味。◎hue/saturation/lightness/alpha・・・色を取得するhue(@color) とか saturation(@color)とか記述して使います。
  12. 12. LESSってなんぞ?■関数と演算(Math関数)◎round(数値)・・・四捨五入  ceil(数値)・・・切り上げ floor(数値)・・・切り捨て   percentage(数値)・・・%に表示切り替え@suuji: 0.2;@base-color: rgba(204, 65, 30, 0.5);#header {background: fadein(@base-color, percentage(@suuji));}
  13. 13. LESSをがんばって使ってみた■LESSってなんぞ?■基本導入■こんなこともできまふ
  14. 14. 基本導入①.lessスタイルシートへのリンク(と、拡張子変更)<link rel=“stylesheet/less” type=“text/css” href=“styles.less”>②less.jsへのリンク<script type=“text/javascript” src=“less.js”>※注意事項※必ず①、②の順番で記述する。導入おわり~。
  15. 15. LESSをがんばって使ってみた■LESSってなんぞ?■基本導入■こんなこともできまふ
  16. 16. ①ウォッチモードブラウザ上のURLのお尻に#!watchとつけてあげて、一度更新。その後、LESSファイルを更新して保存すると・・・更新(F5とか)をしなくても、勝手にLESSの変更内容が表示されるようになります。※HTMLファイルを編集した場合は更新が必要です。
  17. 17. !!!!Warning!!!!だんだん難しくなってきますナ、ナンダッテー!
  18. 18. ②変数を使って変数を定義変数を使って、別の変数を定義してあげることができます。//コンパイル後#header { color:#6c94be; }//書き方@blue: #5b83ad;@light-blue: @blue + #111111;#header { color: @light-blue; }//コンパイル後#header {content: ‘bizvektor’;}//書き方@muryo-theme: ‘bizvektor’;@hya-hho-: ‘muryo-theme’;#header {content: @@hya-hho-;}
  19. 19. ③ミックスインと引数ミックスインに引数を持たせて、関数のように扱うことができます。//コンパイル後#header {border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-ms-border-radius: 5px;}#footer {border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-ms-border-radius: 10px;}//書き方.kadomaru(@kuma: 5px) {border-radius: @kuma;-moz-border-radius: @kuma;-webkit-border-radius: @kuma;-ms-border-radius: @kuma;}#header {.kadomaru;}#footer {.kadomaru(10px);}
  20. 20. ③ミックスインと引数//コンパイル後.box-shadow2 {box-shadow: box-shadow(2px 5px10px 12px #888);-moz-box-shadow: box-shadow(2px5px 10px 12px #888);-webkit-box-shadow: box-shadow(2px 5px 10px 12px #888);background: #aacccc;width: 300px;height: 100px;}//書き方.box-shadow (@arg) {box-shadow: @arg;-moz-box-shadow: @arg;-webkit-box-shadow: @arg;background: #aacccc;width: 300px;height: 100px;}.box-shadow2 {.box-shadow(2px 5px 10px 12px #888);}※ .box-shadow (@x:0,@y:0,@blur:10px,@color: #000) { ……   と書く記述方法もあるが、blurの値が調整できない。
  21. 21. ③ミックスインと引数ミックスインの第1引数に、条件っぽいものを設定することができます。//コンパイル後.boxbg {background: #666666;display: block;}// ※@switchの値を「dark」にした場合.boxbg {color: #666666;display: block;}// @_は、どの条件にもあてはまる、の意味。//書き方.mixin(light, @color) {background: @color;}.mixin(dark, @color) {color : @color;}.mixin(@_,@color) {display: block;}@switch: light;.boxbg {mixin(@switch, #666666);}
  22. 22. ③ミックスインと引数本物の(?)条件分岐もできます。//コンパイル後. kyoutyou {font-size: 20px;background: #ff0000;}// @kuma: 15px の場合. kyoutyou {font-size: 15px;}//書き方@kuma: 30px;.mixin(@kuma) when (@kuma < 20px) {font-size: @kuma;}.mixin(@kuma) when (@kuma >= 20px) {font-size: 20px;background: #ff0000;}.kyoutyou {.mixin(@kuma);}
  23. 23. ③ミックスインと引数本物の(?)条件分岐もできます。// 条件分岐は、以下のようなオプション?を持っています。.mixin (@kuma) when (@kuma > 10), (@kuma < 10) { …… } // 「,」でorのような感じ.mixin (@kuma) when (isnumber(@kuma) ) and ( @kuma > 10) { …… } // 見てそのまま.mixin (@kuma) when not (@kuma > 0) { …… } // 否定@kuma: mobile;.mixin (@kuma) when (@kuma = mobile) { …… } //文字列評価@kuma: 10;.mixin (@kuma) when (isnumber(@kuma)) { …… } //タイプ評価 ※タイプ評価は以下の通り ・iscolor ・isnumber・isstring ・iskeyword ・isurl ・ispixel ・ispercentage ・isem ※whenは全ての条件に当てはまらない値が入ると、エラーを起こします。orz
  24. 24. ③ミックスインと引数パラメータの個数で条件分岐させる、という方法まであります。//コンパイル後.kuma {color: #990000;}.kuma2 {color: # 009900;background:#000099;}//書き方.bgstatus(@a) {color: @a;}.bgstatus(@a,@b) {color: @a;background: @b;}.kuma {.bgstatus(#990000);}.kuma2 {.bgstatus(#009900, #000099);}
  25. 25. ④入れ子と変数入れ子の中に書いた変数を、上手に上書きしたり継承できます。//コンパイル後.foo {background : #ff0000;}.foo .bar {background : #0000ff;}.foo .bar2 {background : #ff0000;}//書き方.foo {@kuma: #ff0000;background: @kuma;.bar {@kuma: #0000ff;background: @kuma;}.bar2 {background: @kuma;}}
  26. 26. ⑥名前空間なるもの別の場所で、クラスやIDの中身を呼び出せる。//コンパイル後#header a {color: #FFa500;display: block;border: 1px solid #000000;background: #666666;}#header a:hover {color: #FFa500;display: block;border: 1px solid #000000;background: #FFFFFF;}//書き方#foo {.button(){display: block;border: 1px solid #000000;background: #666666;&:hover {background: #FFFFFF;}}}#header a {color:#FFa500;#foo > .button;}
  27. 27. そのほか勉強中にわかったこととか……ホホゥ
  28. 28. 動作環境・ローカルでは、GoogleChromeでは動きませんでした! ⇒Macでは、ターミナルを立ち上げ、以下のように入れてあげてChromeを立ち上げると、動くようです。/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --allow-file-access-from-files ⇒Windowsでは、Chromeのショートカットを右クリックし、「リンク先」のプロパティ…に上記の赤文字を追記すると動く 説があるのですが、僕は動きませんでした。(そんなプログラムありません、とWindowsさんに叱られました)どうやら、セキュリティ的にChromeは読み込んでくれないようです。FireFoxは正常に動きました。IEは9は動きませんでした。Macのみですが、Safariは正常に動きました。
  29. 29. どんな場面で使えそう?①ちょー長いCSS書くときとりあえずソースコードが短くなることは分かりました。そこまで長いCSS ……、書いたことナイケド 。②ベンダープレフィックスを大量に書かないといけなさそうな場合いちいちベンダープレフィックスを何度も書くのは面倒。一回書いたらあとは引用できるようなイメージで使えるとよさそう。資料には出てきてませんが、linear-gradientのベンダープレフィックスに対するLESSの書き方も、ggrば出てきました。結果的にソースコードも短くなりますし、それなりに重宝しそうな場面もありそうです。③厳密な色を求めないといけない場合カラー関数により、厳密な色を計算で割り出せる。基準の色だけしっかり割り出せばOK!④そのままCSSも書ける
  30. 30. 「コンパイル」って?せっかく書いたLESSのソースコードですが、最後はコンパイルしてプレーンなCSSに変えてしまうことが多いようです。理由は、JavaScriptのままだと動きが遅い、というのが要因にあるようです。……で 実際の開発では・コンパイルのアプリやらソフトを設定(.lessファイルを常に監視するとか)・LESSを書く・コンパイルのソフトでコンパイる・HTMLは出力されるCSSを読み込みに行かせる・ブラウザでチェックする・完成したらCSSを読み出し、CSSファイルとして保存みたいな流れ?なのかな?less.jsは、大層なソフトやらアプリやら使わなくてもいいので便利です、ってことです。それでも「書いたLESSをそのまま使いたい!」という人は、サーバーサイドのLESSなどの導入をオススメします。
  31. 31. そのほかさいごに!ナニナニ?
  32. 32. さいごはWordBench ……らしくWordPressに組み込めるの?クミコンデヨー
  33. 33. WordPressに組み込めるの?ありました!組み込めます!キタ━━━(゚∀゚) !!━━━
  34. 34. WordPressに組み込めるの?◎LESSをサポートしているプラグイン類・JetPack by WordPress.com(の機能の一部)・WP-LESS・WP Booster ……(の機能の一部に搭載されているとかいないとか ?)・BW LESS-CSS(評価が高い模様。ためしにいれたら動きました)などなどなどなどなど。WordPress.orgで検索したらいっぱいあるよー。
  35. 35. 拙い発表でしたが、ありがとうございました。マタネー!
  1. A particular slide catching your eye?

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

×