Dart-sassであそぼう

Demo
https://dart-sass-bootstrap-demo.netlify.com/

Source
https://github.com/terrierscript/dartystrap/

Soruce (parcel-plugin)
https://github.com/terrierscript/parcel-plugin-darty

Transcript

1. %BSU4BTTであそぼう
   .FHVSPDTT!P3P
   

   View Slide

2. $44ͷษڧձʹ͓͍ͯ

   4BTTʹؔ͢Δ಺༰ͱͳͬͯ

   ͠·ͬͨ͜ͱΛ
   ͓࿳ͼ͍ͨ͠·͢
   ͸͡Ίʹ
   

   View Slide

3. ࣗݾ঺հ
   w 44V[VLJ
   w !UFSSJFSTDSJQU
   w ϑϦʔϥϯεΤϯδχΞ
   

   View Slide

4. ͝ଘ஌4BTT
   

   View Slide

5. 4BTTͷ࠷ۙͷͰ͖͝ͱ
   

   View Slide

6. SVCZTBTT͕EFQSFDBUFEʹ
   

   View Slide

7. ࠓޙ͸%BSU4BTTͱ-JC4BTT
   ͚ͩαϙʔτ͍ͯ͘͠Αʂ
   

   View Slide

8. %BSU4BTTͱͳ
   

   View Slide

9. %BSU
   w (PPHMF੡ͷݴޠͷ"MU+4
   w ਺೥ؒͻͬͦΓ͍ͯͨ͠
   w ਖ਼௚ফ͑ͨݴޠͩͱࢥͬͯ·ͨ͠ɻ͝ΊΜͳ͍͞
   w ࠷ۙqVUUFSͳͲ࠶஫໨͞Εͭͭ͋Δ
   

   View Slide

10. %BSU4BTT
    w จࣈ௨Γ%BSU੡ͷTBTT
    w SVCZΑΓߴ଎ͱ͍͏৮ΕࠐΈ
    w OQNʹ͸+BWB4DSJQUͱͯ͠഑෍͞Ε͍ͯΔ
    

    View Slide

11. %BSU4BTT
    w จࣈ௨Γ%BSU੡ͷTBTT
    w SVCZΑΓߴ଎ͱ͍͏৮ΕࠐΈ
    w OQNʹ͸+BWB4DSJQUͱͯ͠഑෍͞Ε͍ͯΔ
    

    View Slide

12. ͭ·Γɺ͜Ε͸

    ϒϥ΢βͰಈ͔ͤΔɾɾɾʁ
    

    View Slide

13. ͱظ଴͢Δ΋
    

    View Slide

14. ݁࿦ɿ·ͩແཧ
    IUUQTHJUIVCDPNTBTTEBSUTBTTJTTVFT
    

    View Slide

15. ·ͩແཧͷཧ༝
    w *0पΓͷ࣮૷͕ඞཁ
    w JNQPSUपΓͱ͔
    w Ϗϧυతʹผʹ͠ͳ͖Ό͍͚ͳ͍
    w ͦΜͳͷ΍ͬͯΔ࣌ؒͶ͑ʂ
    

    View Slide

16. ϠμϠμʂಈ͔͍ͨ͠ʂ
    

    View Slide

17. ແཧ໼ཧʹͰ΋
    %BSU4BTTΛ

    ϒϥ΢βͰ

    ಈ͔͍ͨ͠ʂʂʂ
    ͜ͷεϥΠυͷझࢫ
    

    View Slide

18. ˞จྔଟ͘ͳͬͯ͠·ͬͨͨΊ

    ࡉ͔͍࣮૷ʹ͍ͭͯ͸

    ͳΜ΍͔Μ΍ͱলུ͍͖ͯ͠·͢
    

    View Slide

19. ͦͷ̍ɿ
    ͱΓ͋͑ͣ؆୯ͳߏจΛ

    ϒϥ΢βͰίϯύΠϧ͠
    ͍ͨ
    

    View Slide

20. ·ͣ͸͓΋ΉΖʹJNQPSU
    

    View Slide

21. ͓΋ΉΖʹXFCQBDLىಈ
    

    View Slide

22. ͓΋ΉΖʹXFCQBDLىಈ
    ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ
    ʼɹ$SJUJDBMEFQFOEFODZʻ
    ʉ:?:?:?:?:?:?:?:?:ʉ
    

    View Slide

23. TFMGSFRVJSFSFRVJSF

    ͯ͠Δ͔ΒXFCQBDLղऍग़དྷͳ͍
    

    View Slide

24. ͡Ό͋QBSDFMͰ͸Ͳ͏͔
    

    View Slide

25. ZBSOQBSDFMTFSWF
    

    View Slide

26. ZBSOQBSDFMTFSWF
    ௨Δ
    

    View Slide

27. ZBSOQBSDFMTFSWF
    ௨Δ
    ʢಈ͘ͱ͸ݴͬͯͳ͍ʣ
    

    View Slide

28. ී௨ʹ͏͔͝ͳ͍
    ΤϥʔɿTFU*NNFEJBUF଍Γͳ͍
    

    View Slide

29. ղܾࡦɿTFU*NNFEJBUFͷ
    1PMZpMM଍͢
    

    View Slide

30. ͍͚Δ͔ɾɾɾʁ
    

    View Slide

31. ࢒೦ɻ·ͩ·ͩग़ΔΤϥʔ
    ΤϥʔɿGSPN͕Ͳ͏ͷ͜͏ͷʁ
    

    View Slide

32. ݪҼΛ௥͏
    

    View Slide

33. ͕͢͞ʹ͜ͷ··Ͱ͸ແཧ
    

    View Slide

34. EBSUTBTTΛίϯύΠϧ

    ͢Ε͹ಡΈ΍͍͔͢΋
    

    View Slide

35. EBSUTBTTΛίϯύΠϧ
    EBSUΛJOTUBMM
    CSFXUBQEBSUMBOHEBSU
    CSFXJOTUBMMEBSUŠEFWFM
    DMPOF
    HJUDMPOFIUUQTHJUIVCDPNTBTTEBSUTBTTHJU
    DEEBSUTBTT
    CVJMETBTT
    QVCHFU
    QVCSVOHSJOEFSOQNQBDLBHF
    DECVJMEOQN
    ZBSOMJOL
    ͳΜ΍͔Μ΍ͯ͠ϏϧυʢΘΓͱ؆୯ʣ

    ZBSOMJOLͯ͠ඥ͚ͮ͢Δ
    

    View Slide

36. %BSUKTଆͷNJOJGZΛ੾Δ͜ͱͰ

    ಡΊΔίʔυʹ
    

    View Slide

37. ͦΜͳ͜ΜͳͰݪҼಛఆ

    Ͳ͏΍Β#VGGFSGSPN͍͘͞
    

    View Slide

38. ղܾɿ#VGGFSͷ

    QPMZpMM௥Ճ
    ˞΄Μͱ͸QBSDFM͕উखʹQPMZpMMͯ͘͠ΕΔ͕ɺ
    SFRVJSF͕͏·͘ղऍ͞Εͯͳ͍ͨΊೖͬͯ͘Εͳ͍
    

    View Slide

39. ͏͍ͨ͝ʂ
    

    View Slide

40. ΋͏ͪΐͬͱؤுΔ
    

    View Slide

41. #PPUTUSBQ͕TBTT
    

    View Slide

42. ͦͷ
    #PPUTUSBQΛ

    ίϯύΠϧ͍ͨ͠
    

    View Slide

43. ͦ͏ͳΔͱ౰વ

    !JNQPSUͷॲཧ͕ඞཁ
    

    View Slide

44. !JNQPSU
    w 4BTTʹ͸JNQPSUFSͱ͍͏Φϓγϣϯ͕͋ͬͯ͜Ε͕࢖
    ͑Δ
    w ϑΝΠϧ͸VOQLH͔ΒҾͬுͬͯ͜ΕΔ
    w एׯ໘౗Ͱ͸͋Δ͚ͲͦΜͳ೉͘͠ͳ͍
    

    View Slide

45. ͱ͍͏͜ͱͰ࣮૷
    

    View Slide

46. ͕ɾɾɾବ໨ͬɾɾɾʂ
    

    View Slide

47. ΤϥʔɿJNQPSUFS࣮૷ͯ͠΋

    GT͕ݺ͹Εͯ͠·͏
    

    View Slide

48. ղܾࡦ͍͔ͭ͘ࢥ͍͍ͭͯΔ
    w EBSUͷίʔυ͍ͬͯ͘͡GTΛݺ͹ͳ͘͢Δ
    w QBSDFMͷεΩΛ෇͍ͯGTΛِ૷͢Δ
    w QBSDFMͷQMVHJOͰຒΊࠐΜͰGTΛِ૷͢Δ
    

    View Slide

49. ղܾࡦ͍͔ͭ͘ࢥ͍͍ͭͯΔ
    w EBSUͷίʔυ͍ͬͯ͘͡GTΛݺ͹ͳ͘͢Δ
    w QBSDFMͷ݀Λ෇͍ͯGTΛِ૷͢Δ
    w QBSDFMͷQMVHJOͰຒΊࠐΜͰGTΛِ૷͢Δ
    

    View Slide

50. EBSUΛ͍͘͡Δ
    

    View Slide

51. ΍Ίͱ͘
    

    View Slide

52. ղܾࡦ͍͔ͭ͘ࢥ͍͍ͭͯΔ
    w EBSUͷίʔυ͍ͬͯ͘͡GTΛݺ͹ͳ͘͢Δ
    w QBSDFMͷ݀Λ෇͍ͯGTΛِ૷͢Δ
    w QBSDFMͷQMVHJOͰຒΊࠐΜͰGTΛِ૷͢Δ
    

    View Slide

53. QBSDFMΛͩ·͢
    ຊདྷOPEF༻ʹ༻ҙ͞Ε͍ͯΔSFRVJSF
    

    View Slide

54. QBSDFMΛͩ·͢
    XJOEPXSFRVJSFΛ࢖ͬͯὃ͢ʂʂʂ
    

    View Slide

55. ͜ΕͰ΋͍͍͚Ͳ

    ΍Ίͱ͘
    

    View Slide

56. ղܾࡦ͍͔ͭ͘ࢥ͍͍ͭͯΔ
    w EBSUͷίʔυ͍ͬͯ͘͡GTΛݺ͹ͳ͘͢Δ
    w QBSDFMͷ݀Λ෇͍ͯGTΛِ૷͢Δ
    w QBSDFMͷQMVHJOͰຒΊࠐΜͰGTΛِ૷͢Δ
    

    View Slide

57. QBSDFMͷϓϥάΠϯ࡞ͬͯ
    ຒΊࠐΉ
    

    View Slide

58. Ԛ͍͚ͲҰ൪ϚγͬΆ͍ͷͰ

    ͜Εʹ͓ͯ͘͠
    

    View Slide

59. ͏͍ͨ͝
    

    View Slide

60. ͔͠͠ॏͯ͘ը໘

    ͔ͨ·Δ
    

    View Slide

61. ೥ͳͷͰ8FC8PSLFS͕࢖͑Δ
    

    View Slide

62. ͦͷ
    8FC8PSLFS
    ʹ͍ͨ͠
    

    View Slide

63. ΰϦοͱҠ২
    

    View Slide

64. ੈͷதͦΜͳʹ؁͘ͳ͍
    

    View Slide

65. 8FC8PSLFSͷચྱ
    

    View Slide

66. *MMJHBM*OWPDBUJPO
    %BSUͷ4%,͕TFMG HMPCBM
    MPDBUJPOʹ

    QPMZpMM͍ͯͯ͠ࢮΜͰ͍ͨ
    

    View Slide

67. QBSDFMͷϓϥάΠϯͰॻ͖׵͑Δ
    IUUQTHJUIVCDPNUFSSJFSTDSJQUQBSDFMQMVHJOEBSUZ
    

    View Slide

68. CBCZMPOͷ"45Λ͍͡Ε͹0,
    IUUQTHJUIVCDPNUFSSJFSTDSJQUQBSDFMQMVHJOEBSUZ
    

    View Slide

69. ͏͍ͨ͝
    

    View Slide

70. %&.0
    IUUQTEBSUTBTTCPPUTUSBQEFNPOFUMJGZDPN
    

    View Slide

71. ·ͱΊ
    w EBSUTBTTΛݱ࣌఺Ͱϒϥ΢βͰಈ͔͢ͷ͸ʁ
    w ؆୯ͳͷͳΒͪΐͬͱͨ͠QPMZpMMͰग़དྷΔ
    w JNQPSUབྷΜͰ͘Δͱ͔ͳΓ໘౗ɻ
    

    View Slide

72. ·ͱΊ
    w *0ؔ࿈͕ωοΫʹͳ͍ͬͯΔͷ͸΍ͬͺΓؒҧ͍ͳ͍
    w Ϗϧυπʔϧٽ͔ͤͳ͜ͱΛ݁ߏ΍͍ͬͯΔ෦෼͕͋Δ͜
    ͱ͕Θ͔ͬͨ
    w ύϑΥʔϚϯε͸ଌఆͯ͠ͳ͍͕͋·Γເ͸ݟΕͳͦ͏
    

    View Slide

73. ·ͱΊ
    w EBSUTBTTࣗମ͸MJCTBTT $ݴޠ
    ಡΉΑΓ͸ָͳؾ͕
    ͢Δ
    w Ҿ͖ଓ͖EBSUTBTTʹ͸ؤுͬͯ΄͍͠
    w QBSDFM΋ؤுͬͯ΄͍͠
    

    View Slide

74. ·ͱΊ
    w XFCQBDLͷTBTTMPBEFSͷEBSUTBTTରԠ΋΋͏͙͢དྷͦ͏ͳػӡ

    IUUQTHJUIVCDPNXFCQBDLDPOUSJCTBTTMPBEFSQVMM
    

    View Slide

75. ·ͱΊ
    w ਅ໘໨ʹ΍Γ͍ͨͳΒ4BTTKTͷ࢖͏΄͏͕ઈରྑ͍
    w IUUQTBTTKTPSH
    w -JC4BTTΛ8"4.Խͯ͠Δ΋ͷ
    

    View Slide

76. 4BTTKTɺΊͬͪΌग़དྷ͕ྑ͍
    

    View Slide

77. ͝ਗ਼ௌ

    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide