Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Less - first step

HTML5+α初心者勉強会でしゃべったです。

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Less - first step

  1. 1. 自己紹介なかしまこうき前職: 組込系のSE現職: フロントエンドエンジニアkouki.nakashima@kuronekomichael
  2. 2. LESSとは?
  3. 3. LESSとは?の前に
  4. 4. CSSに満足してますか?
  5. 5. ✔CSSに満足してますか?• よいところ•容易✗•よくないところ•冗長•読みづらい•再利用しづらい
  6. 6. CSSメタ言語• いわゆる中間言語• わかりやすく書いて、利用する時はcssに変換して使う• 「アセンブラ書くの大変だから別の言語で書こうぜ」みたいな感じ。(そんな大仰じゃないけど)• JavaScriptにも同じ様な流れがきてる• Haxe, CoffeeScript, JSX, TypeScript等など• CSSメタ言語の選択肢も色々• Sass(SCSS)、Stylus、LESS、TASS等など
  7. 7. 喧嘩は(・A・)イクナイ!!
  8. 8. LESSの導入
  9. 9. LESSの導入(a) 動的:ページ表示時に変換して使うor(b) 静的:事前にcssに変換しておいて使う
  10. 10. LESSの導入:(a)動的に組み込む• lessファイルと一緒に、less.js(http://lesscss.org/)をページに組み込むだけ• less.jsが自動的にlessを抽出→cssに変換して展開してくれる
  11. 11. • 長所:• 超手軽• 短所:• コスト高い(変換コスト、通信コスト)• IEだと31ファイル制限があるLESSの導入:(a)動的に組み込む
  12. 12. LESSの導入:(b)静的に組み込む• 事前にツールでless→cssファイルに変換しておく• HTMLには今まで通り、cssとして組み込む• ツールはCUIもGUI (LESS.app, WINLESS)も充実• 長所:良いことしかない• 短所:超が付くほど手軽じゃなくなる
  13. 13. LESSの機能
  14. 14. LESSの機能:(1/4)変数//CSS        .feed-­‐detail  {                word-­‐wrap:  break-­‐word;                background-­‐color:  #fffbdc;        }        .service-­‐header  .posted-­‐title  {                background-­‐color:  #fffbdc;        }//LESS        @bg-­‐color-­‐common:  #fffbdc;        .feed-­‐detail  {                word-­‐wrap:  break-­‐word;                background-­‐color:  @bg-­‐color-­‐common;        }        .service-­‐header  .posted-­‐title  {                background-­‐color:  @bg-­‐color-­‐common;        }
  15. 15. LESSの機能:(1/4)変数//colors.less        @bg-­‐color-­‐common:  #fffbdc;        @bg-­‐color-­‐disable:  #ccc;//detail.less        @import  "colors.less"        .feed-­‐detail  {                word-­‐wrap:  break-­‐word;                background-­‐color:  @bg-­‐color-­‐common:        }//main.less        @import  "colors.less"        .service-­‐header  .posted-­‐title  {                background-­‐color:  @bg-­‐color-­‐common:        }
  16. 16. LESSの機能:(2/4)入れ子//CSS.service-­‐header  {        background-­‐color:  #cbe3dc;}.service-­‐header  .posted-­‐title  {        font-­‐weight:  bold;        background-­‐color:  #fffbdc;}.service-­‐header  .posted-­‐title  .date-­‐text  {        font-­‐size:  .9em;        color:  #cc6639;}.service-­‐header  .posted-­‐title  .date-­‐text:hover  {        color:  #99cc39;}
  17. 17. LESSの機能:(2/4)入れ子//LESS.service-­‐header  {        .posted-­‐title  {                background-­‐color:  #fffbdc;                .date-­‐text  {                        font-­‐size:  .9em;                        color:  #cc6639;                }                .date-­‐text:hover  {                        color:  #99cc39;                }        }}
  18. 18. LESSの機能:(3/4)mixin//CSS        .input-­‐container  {                -­‐o-­‐border-­‐radius:  5px;                -­‐ms-­‐border-­‐radius:  5px;                -­‐moz-­‐border-­‐radius:  5px;                -­‐webkit-­‐border-­‐radius:  5px;                border-­‐radius:  5px;        }        .user-­‐output-­‐box  {                -­‐o-­‐border-­‐radius:  10px;                -­‐ms-­‐border-­‐radius:  10px;                -­‐moz-­‐barder-­‐radius:  10px;                -­‐webkit-­‐border-­‐radius:  10px;                border-­‐radius:  10px;        }
  19. 19. LESSの機能:(3/4)mixin//LESS        .b-­‐radius(@radius:  5px)  {                -­‐o-­‐border-­‐radius:  @radius;                -­‐ms-­‐border-­‐radius:  @radius;                -­‐moz-­‐border-­‐radius:  @radius;                -­‐webkit-­‐border-­‐radius:  @radius;                border-­‐radius:  @radius;        }        .input-­‐container  {                .b-­‐radius;        }        .user-­‐output-­‐box  {                .b-­‐radius(10px);        }
  20. 20. LESSの機能:(4/4)演算,関数@color:  #666  -­‐  #222;h2  {        color:  @color;}h2  {        color:  #444;}@color:  #3399cc;.owner-­‐link  {        color:  @color;}.owner-­‐link:hover  {        color:  lighten(@color,  10%);}
  21. 21.  lighten(@color,  10%);          //  @colorより10%だけ明度が高い値  darken(@color,  10%);            //  @colorより10%だけ明度が低い値  saturate(@color,  10%);        //  @colorより10%だけ彩度を上げた値  desaturate(@color,  10%);    //  @colorより10%だけ彩度を下げた値  fadein(@color,  10%);            //  @colorより10%だけ透明度が高い値  fadeout(@color,  10%);          //  @colorより10%だけ透明度が低い値  fade(@color,  50%);                //  @colorを50%透過した値  spin(@color,  10);                  //  @colorより10度だけ色相が大きい値  spin(@color,  -­‐10);                //  @colorより10度だけ色相が小さい値  mix(@color1,  @color2);        //  @color1と@color2をミックスした値
  22. 22. LESSってみた感想•スキルレベルがバラバラのチームでも・・・• 学習コストがほぼゼロで、立ち上がることができた•SinglePageAppを3名が同時並行作業でも・・・• ネストさせることでクラス名の衝突を回避できた•LESSの全機能を無理に使う必要はない!• 入れ子とmixinだけで、導入のメリットは充分にあった• 変数、ビルトイン関数、演算は結局使ってない
  23. 23. Questions?
  24. 24. ご静聴ありがとうございました

×