Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Less - first step

935 views

Published on

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

Published in: Technology
  • Be the first to comment

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. ご静聴ありがとうございました

×