LESS For Web Designer

Transcript

1. HTML5 ͱ͔ษڧձ #27 2012/03/13 less for Web Designer ੪౻
   ༞໵
   @CSS Radar

2. ੪౻
   ༞໵ http://css.studiomohawk.com http://newsletter.studiomohawk.com CSS Radar CSS Radar Newsletter

3. ੪౻
   ༞໵ @cssradar Cyber Agent

4. 
   -&44ͱ͸ 
   γϯλοΫε 
   -&44Ͱͭ͘Δࣗ෼ͷ#PJMFSQMBUF 
   -&44Λ࢖ͬͨϑϨʔϜϫʔΫɺ ίϨΫγϣϯ 
   -&44Λ࢖ͬͨϓϩτλΠϓ࡞੒ϫʔΫϑϩʔ Agenda

5. LESSͰ͸ม਺ɺ ϛοΫεΠϯɺ ೖΕࢠϧʔϧɺ ࢛ଇ ԋࢉͱؔ਺ͳͲΛCSSʹ௥Ճ͢Δ͜ͱ͕Ͱ͖· ͢ɻ ϓϩύςΟ΍ηϨΫλͷ֦ு͸͋ͬͯ΋ݴޠͦͷ ΋ͷʹେ͖͘มԽ͕ͳ͍CSSʹμΠφϛοΫͳε λΠϧγʔτΛ࡞੒Ͱ͖ΔػೳΛ௥Ճ͢Δͷ͕ LESSͰ͢ɻ

   lessͱ͸

6. - LESS / JavaScript (node.js) → CSSʹݶΓͳ͍ۙ͘͠จ๏Ͱॻ͔Ε͍ͯΔ - Sass /

   Ruby → ߴػೳɻ Compassɺ BourbonͳͲ͸ศར - Stylus / node.js → ΫϦʔϯͳจ๏ɺ Τϥʔจ͸लҳ lessͱ͸

7. -&44͸OPEFKTɺ ͭ·Γ+BWB4DSJQUΛ࢖ͬͯ࡞੒ ͞Ε͍ͯ·͢ɻ ϒϥ΢β͔ΒͰ΋ར༻͢Δ͜ͱ͕Ͱ͖·͕͢ɺ ࠷ۙ Ͱ͸-&44BQQɺ 8JO-&44ɺ 4JNQ-&44ɺ $PEF,JU ͳͲͷ(6*ΞϓϦέʔγϣϯΛ࢖ͬͯ$44΁ͷม

   ׵Λߦ͏ϫʔΫϑϩʔͷ΄͏͕Ұൠతʹͳ͖ͬͯ ͍ͯ·͢ɻ lessͱ͸

8. Syntax

9. γϯλοΫε
   
   ม਺ @ม਺໊: ஋; @color: #4D926F; @font-size: 16px; @strings: “/path/to/image/”; @ver:

   @foo;

10. γϯλοΫε
    
    ϛοΫεΠϯ .class ·ͨ͸ #id { property: value; } ྫ .center-block

    { display: block; margin-left: auto; margin-right: auto; }

11. γϯλοΫε
    
    ೖΕࢠϧʔϧ #header { h1 { font-size: 26px; font-weight: bold; }

    p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; } } } }

12. γϯλοΫε
    
    ԋࢉ @base: 5%; @filler: @base * 2; @other: @base +

    @filler; .selector { color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; }

13. γϯλοΫε
    
    ؔ਺ lighten(@color, 10%); darken(@color, 10%); saturate(@color, 10%); desaturate(@color, 10%); fadein(@color,

    10%); fadeout(@color, 10%); fade(@color, 50%); spin(@color, 10); spin(@color, -10); mix(@color1, @color2);

14. γϯλοΫε
    
    υΩϡϝϯτ http://lesscss.org/ http://less-ja.studiomohawk.com/ "MFYJT
    4FMMJFSࢯͷྃղΛ͑ͯɺ ࢲ͕೔ຊޠ༁ͨ͠υΩϡϝϯτ͕͋Γ·͢ɻ ৄࡉʹ͍ͭͯ͸ͦͪΒΛࢀর͍ͩ͘͞ɻ

15. Boilerplate

16. boil·er·plate [boi-ler-pleyt] noun 1. plating of iron or steel for

    making the shells of boilers,covering the hulls of ships, etc. 2. Journalism . ! a. syndicated or ready-to-print copy, used especially by weekly newspapers. ! b. trite, hackneyed writing. 3. the detailed standard wording of a contract, warranty, etc. 4. Informal . phrases or units of text used repeatedly, as in correspondence produced by a word-processing system. 5. frozen, crusty, hard-packed snow, often with icy patches. Boilerplate

17. bootstrap [ˈbuːtˌstræp] noun 1. A loop (leather or other material)

    sewn at the side or top rear of a boot to help in pulling the boot on. 2. A means of advancing oneself or accomplishing something without aid. He used his business experience as a bootstrap to win voters. (computing) The process by which the operating system of a computer is loaded into its memory 3. (computing) The process necessary to compile the tools that will be used to compile the rest of the system or program. 4. (statistics) Any method or instance of estimating properties of an estimator (such as its variance) by measuring those properties when sampling from an approximating distribution. Boilerplate

18. ࠶ར༻͕Մೳͳίʔυू -&44ʹ͸ม਺ɺ ϛοΫεΠϯͷΑ͏ͳ࠶ར༻Λલ ఏͱͨ͠ػೳ͕͋ΔͷͰɺ ͜ͷػೳΛར༻ͯࣗ͠෼ ͷ#PJMFSQMBUF#PPUTUSBQΛߏங͍ͯ͘͜͠ͱͰॳ ظίετΛ͛͞Δ͜ͱ͕Ͱ͖·͢ɻ Boilerplate

19. $44
    ϑϨʔϜϫʔΫ͸ҧ͏ʁ HT΍CMVFQSJOUͳͲʹ୅ද͞ΕΔ$44ϑϨʔ ϜϫʔΫ͸$44͚ͩͰ͸ͳ͘)5.-ʹ΋ࢦఆͷΫ ϥε໊Λར༻͢Δඞཁ͕͋Γ·ͨ͠ɻ -&44΍4BTTͷม਺΍ϛοΫεΠϯΛར༻͢Ε ͹ɺطଘͷ)5.-Λมߋ͠ͳͯ͘΋άϦουͷੜ ੒΍ɺλΠϙάϥϑΟͷઃఆɺΧϥʔεΩʔϜͷ มߋͳͲΛߦ͑·͢ɻ Boilerplate

20. http://www.slideshare.net/collylogic/developing-your-ultimate-package Boilerplate

21. http://html5boilerplate.com/ Boilerplate

22. http://24ways.org/2011/front-end-style-guides Boilerplate

23. http://24ways.org/2011/crafting-the-front-end Boilerplate

24. http://github.com/studiomohawk/IIT Boilerplate / IIT

25. ͦΕͧΕͷιʔείʔυΛϕʔεʹগͣͭ͠खΛՃ͑ͯɺ ࣗ෼Β͍͠#PJMFSQMBUFΛҭ͍ͯͯ·͢ɻ )5.-ɺ$44ɺ+4ͱ͍͏πʔϧ͸ࣗ෼͕࢖͍΍͍༷͢ʹ खೖΕ͢Δɻ -&44͸ͦͷ͓खೖΕͷख఻͍Λͯ͘͠ΕΔͷʹ࠷దͳ πʔϧɻ Boilerplate / IIT

26. Boilerplate / IIT

27. Boilerplate / IIT

28. Boilerplate / IIT

29. 
    DMFBSpY
    /JDPMBT
    (BMMBHIFS 
    ΧϥʔύϨοτ
    
    BOEVQ
    CZ
    "OEZ
    $MBSL 
    ϔϧύπʔϧ
    
    )5.-
    #PJMFSQMBUF 
    ϝσΟΞΫΤϦ
    BOEVQ
    CZ
    "OEZ
    $MBSL 
    OPSNBMJ[FDTT
    /JDPMBT
    (BMMBHIFS 
    00$44
    
    /JDPMF
    4VMMJWBO 
    λΠϙάϥϑΟʔ
    
    )BSSZ
    3PCFSUT 
    ϑΥϯτϑΝϛϦʔ
    
    DTTGPOUTUBDLDPN 
    άϦουγεςϜ
    
    'SBNFMFTT
    CZ
    +POJ
    ,PSQJ 
    $44
    
    -&44$44.JYJOT
    CZ
    .BUUIFX
    8BHFSpFME

    Boilerplate / IIT

30. Framework/Collection

31. #PPUTUSBQ
    5XJUUFS Framework/Collection

32. #PPUTUSBQ
    5XJUUFS 
    ެ։͞Ε͍ͯΔ΋ͷͰ͸࠷େڃͷ-&44ར༻౓ 
    ϑϨʔϜϫʔΫͱ͍͏ΑΓ͸σβΠϯύοέʔδ 
    ͔ΒϨεϙϯγϒσβΠϯʹରԠ 
    ৄ͘͠͸͜ͷޙͷൃදͰ Framework/Collection

33. 1SFCPPUMFTT Framework/Collection

34. 
    #PPUTUSBQ
    'SPN
    5XJUUFSͷݪܕ 
    -&44͕ެ։͞Εͨޙ͙͢ʹެ։͞Εͨઌۦऀ 
    ͷϛοΫεΠϯɺ ͭͷม਺ͷίϨΫγϣϯ 
    ϕʔγοΫͳ-&44ͷιʔεΛֶͿʹ࠷ద 1SFCPPUMFTT Framework/Collection

35. -&44
    &MFNFOUT Framework/Collection

36. 
    1SFCPPUMFTTͱಉ࣌ظʹެ։͞Εͨ 
    !JNQPSU͚ͩͰݺͼग़ͤΔؾܰ͞Λ঺հ 
    ͷϛοΫεΠϯͷίϨΫγϣϯ 
    ϕʔγοΫͳ-&44ͷιʔεΛֶͿʹ࠷ద -&44
    &MFNFOUT Framework/Collection

37. 
    BOE
    VQ Framework/Collection

38. 
    ϞόΠϧϑΝʔετΞϓϩʔνͷ)5.-
    #PJMFSQMBUF 
    "OEZ
    $MBSLFࢯ࡞ )BSECPJMFE
    8FC
    %FTJHOͷஶऀ 
    $MBSLFࢯߟҊͷΧϥʔύϨοτ༻ม਺͸ศར 
    ݩʑ͸$44ϕʔεͩͬͨͷΛ-&44ʹίϯόʔτ 
    BOE
    VQ Framework/Collection

39. 5IF
    4FNBOUJD
    (SJE
    4ZTUFN Framework/Collection

40. 
    Ϩεϙϯγϒݻఆ෯྆ํ࢖͑ΔάϦουγεςϜ 
    ط੒ͷΫϥε໊ʹཔΒͳ͍ͱ͍͏ҙຯͰηϚϯςΟΫ 
    article { .column(12); } 
    Ϩεϙϯγϒ άϦουγεςϜͷߏங͕ͱͯ΋ָ 5IF
    4FNBOUJD
    (SJE
    4ZTUFN

    Framework/Collection

41. '3".&-&44 Framework/Collection

42. 
    άϦουαΠζΛݻఆʹ͢Δ৽͍͠Ϩεϙϯγϒ 
    άϦουͷ௥Ճ͸खಈ 
    άϦου਺͸΢Οϯυ΢ͷαΠζʹΑͬͯมԽ͢Δ 
    ඞཁͳ෦෼͚ͩൈ͖ग़ͯ͠࢖ͬͯ·͢ 
    4BTT൛΋͋Δ '3".&-&44 Framework/Collection

43. (SJEQBL Framework/Collection

44. 
    ϨεϙϯγϒάϦουΛΧελϚΠζ 
    ΨΠυ༻ͷഎܠɺ -&44ɺ +4ɺ $44ɺ 4BTTΛੜ੒ 
    ͲΜͳϓϩδΣΫτʹͰ΋ରԠͰ͖Δ෯ͷ޿͞ 
    ΢Σϒπʔϧ (SJEQBL Framework/Collection

45. -&44$44.JYJOT Framework/Collection

46. 
    $44ʹಛԽͨ͠ϛοΫεΠϯू 
    ΄΅શͯͷ$44ͷϓϩύςΟΛ໢ཏ 
    ݺͼग़͠ΛߦΘͳ͚Ε͹$44ʹ͸ॻ͖ग़͞ͳ͍
    
    ϛοΫεΠϯͷఆٛͷํ๏ͰมΘΓ·͢ 
    DVCJDCF[JFS FBTJOH ͷม਺͸लҳ -&44$44.JYJOT Framework/Collection

47. 
    ঺հͨ͠΄΅͢΂ͯͷϦϙδτϦΛू໿ 
    ݸਓతͳݟղͰ ศརͳ෦෼͚ͩΛબ୒ 
    υΩϡϝϯτ෇͖ ະ࣮૷ 
    ίϥϘϨʔλ͸͍ͭͰ΋ืूͯ͠·͢ **5 Framework/Collection

48. Prototyping

49. Prototying “Design isn’t just how it looks, Design is how

    it works” Steve Jobs

50. Prototying Water Fall Ajile Lean UX "KJMF࣌୅ͷܰྔ69

51. ཁٻ Ϗδωεΰʔϧ ৄࡉ࢓༷ ։ൃ σβΠϯ
    
    ίʔσΟϯά ཁٻϕʔεͷ։ൃϑϩʔ Prototying

52. ֓ཁཁٻ Ϗδωεΰʔϧ ৄࡉ࢓༷ ։ൃ ίϯηϓτσβΠϯ ϓϩτλΠϓ ϓϩτλΠϓ͔Β࢓༷ΛৄࡉԽ͍ͯ͘͠ Prototying

53. 
    ίϛϡχέʔγϣϯͷ૒ํ޲ੑ 
    ໨ʹݟ͑Δ
    
    ࣮ࡍʹಈ࡞͢ΔϓϩτλΠϓ 
    ϑΟʔυόοΫ
    
    मਖ਼ 
    ܁Γฦ͠ 
    ৄࡉ࢓༷ʹམͱ͍ͯ͘͠ Prototying

54. 
    ίϯηϓτΛܗʹ 
    /FFET
    
    8BOUTΛ఻ୡ͢ΔͨΊͷϏδϡΞϥΠζ 
    ։ൃʹର͢Δ໰୊ղܾ΋σβΠϯͰఏҊ͠΍͘͢ͳΔ )5.-
    
    $44
    
    +4
    Ͱ࡞ΔϓϩτλΠϓ͸ͦͷҰॿ ͱͳΔσβΠϯπʔϧ Prototying

55. Ͱ΋ɺ ίʔσΟϯά͸΍ͬͺΓ͕͔͔࣌ؒΔ +BWB4DSJQU͸K2VFSZΛಘͯɺ $44͸Ϟμϯϒϥ΢βͱ$44ͱ ͦͯ͠-&44Λಘ·ͨ͠ɻ ϋΠϑΟσΟϦςΟͰɺ ΠϯλϥΫςΟϒͳ ϓϩτλΠϓ͸ܾͯ͠೉͘͠ͳ͍Ͱ͢ɻ Prototying ?

    !

56. 
    #PPUTUSBQ
    'SPN
    5XJUUFS IUUQUXJUUFSHJUIVCDPNCPPUTUSBQ 
    'PVOEBUJPO
    CZ
    ;63#
    -&44
    WFS΋͋Δ IUUQGPVOEBUJPO[VSCDPN 
    #MPDLT
    CZ
    &JHIU4IBQFT
    ઈࢍ੡࡞தΒ͍͠ IUUQTHJUIVCDPN&JHIU4IBQFT#MPDLT )5.-
    
    $44
    
    +4
    ϓϩτλΠϓϑϨʔϜϫʔΫ

    Prototying

57. ࢲ΋**5ΛϕʔεʹϓϩτλΠϓ ϑϨʔϜϫʔΫΛ࡞੒༧ఆͰ͢ɻ Prototying

58. Finally..

59. Design is for solving problems. But Don’t try to solve

    wrong problems.

60. Our use of Less is a stopgap while we wait

    for the future of CSS – which is looking really promising and already has great proposals for variables and mixins! For now however, we’re really happy with Less – but don’t think you should have to use it if it’s not your thing. Jacob Thornton A.K.A fat