Sass for everyday's cooking

Transcript

1. ΫοΫύουגࣜձࣾ αʔϏεσβΠϯ෦
   αʔϏεσβΠϯάϧʔϓ ஑ా୓࢘ɹσβΠφʔ ຖ೔ͷྉཧͷͨΊͷSass 
   
   $44
   /JUF
   -1
2. ࣗݾ঺հ Sass Less,CSS ೥݄ʙ ʙ
   ೥݄ ஑ా୓࢘ @tikeda (scss)
5. Agenda ࠓ೔࿩͢͜ͱ
6. ΫοΫύουͷ։ൃελΠϧͱ4BTT 4BTTΛ࢖ͬͨࣗࣾσβΠϯϑϨʔϜϫʔΫ ຖ೔ͷྉཧͷͨΊͷ4BTTʁ
7. About Cookpad’s Coding Style ΫοΫύουͷ։ൃελΠϧͱSass
8. Engineer + Designer 
   
   ࣌఺ 45ਓ
9. ΫοΫύουͷ։ൃελΠϧ •Sass / HamlʢσβΠφʔɾΤϯδχΞ໰Θͣʣ •GitHubʢσβΠφʔɾΤϯδχΞ໰Θͣʣ •ฏߦͯ͠ෳ਺ͷϓϩδΣΫτ͕ਐΉ •cookpad.comҎ֎ͷαʔϏε΋ଓʑ։ൃ •σόΠε໰ΘͣαʔϏε։ൃ •ૣ͍։ൃαΠΫϧʢ1೔Կ౓΋σϓϩΠʣ
10. UI UX user team Designer Engineer Directer Engineer Engineer Directer Directer Engineer Designer Engineer
11. ΈΜͳͰ։ൃ Code Design Function Quality Speed
12. ΈΜͳͰ։ൃ Code (Sass) Design Function Quality Speed
14. $44
    4$44
    DPEJOH
    TUZMF
    •Use a line break between selecters button, button:visited, button:hover { } button, button:visited, button:hover { } #"%
    (00%
    
15. $44
    4$44
    DPEJOH
    TUZMF
    •Use underscore in class names and ids •Don't qualify ID Rules with tag names or classes button#backButton { } #back_button { } #"%
    (00%
    
16. •Add mixins at the beginning of selector class .comment { @include border-radius(2px); @include box-shadow; color: $red; font-weight: bold; } (00%
    $44
    4$44
    DPEJOH
    TUZMF
    
17. ίʔυϨϏϡʔ
18. ίʔυϨϏϡʔ ϧʔϧ͕͋ΔͷͰɺ !JODMVEF͸Ұ൪্Ͱ͢ मਖ਼͠·͢
    
19. ίʔυϨϏϡʔ
20. ίʔυϨϏϡʔ ͜ͷϨϕϧͷΠϯσϯτͷ࣌͸վߦ͕ೖͬ ͍ͯͳͯ͘΋͏Ұݸਂ͍Ϩϕϧͩͱೖͬͯ ͍ΔͷͬͯԿ͔ҙਤ͕͋ΔͷͰ͠ΐ͏͔ʁ
    ΨΠυϥΠϯͩͱࢠཁૉͱଐੑͷؒʹ ͸ۭߦ͋Γɺࢠཁૉ͕ฒͿ৔߹͸ۭߦ ͳͬ͠Ά͍ΜͰ͢ΑͶɻ !UBLVKJJLFEB͞ΜɺͲ͏Ͱ͠ΐ ͭͷ$44ϑΝΠϧͷதͰɺͲ͏͍͏৔ ߹ʹۭߦΛ͚͋Δͷ͔ͱ͍͏ϧʔϧ͸࣋ͪ ·͠ΐ͏ɻࠓޙ·ͱ·Γ͕ͳ͘ͳΔΑ͏Ͱ ͨ͠ΒΨΠυϥΠϯԽ͠·͢ɻ
21. 4$44
    ߏ੒ Sara Sara_settings cookpad.scss partial pages common extensions @import
22. 4$44
    ߏ੒ Sara Sara_settings cookpad.scss partial pages common extensions ݶఆϢʔβʔͳͲҰ࣌తͳػೳ༻ ԣஅతʹ࢖͍ͬͯΔUIίϯϙʔωϯτ ϖʔδ͝ͱͷελΠϧ༻ Sara͕·͔ͳ͑ͳ͍جຊελΠϧ @import
23. 4$44
    ߏ੒ Sara Sara_settings extension_a.scss @import extension_b_smartphone.scss
24. 4$44
    ߏ੒ Sara Sara_settings cookpad.scss partial pages common extensions ݶఆϢʔβʔͳͲҰ࣌తͳػೳ༻ ԣஅతʹ࢖͍ͬͯΔUIίϯϙʔωϯτ ϖʔδ͝ͱͷελΠϧ༻ Sara͕·͔ͳ͑ͳ͍جຊελΠϧ @import
25. Sara SassΛ࢖ͬͨࣗࣾσβΠϯϑϨʔϜϫʔΫ
26. Sara?
27. 皿 美�味しい料理を支える、 料理に合う美�しい皿
28. user team
29. team
33. ΫοΫύουͷσβΠϯͷந৅Խ
34. 6*ίϯϙʔωϯτͷڞ༗
35. ม਺ʹΑΔΧϥʔίʔυͳͲͷ؅ཧ
36. σόΠεΛ·͍ͨͩΧϥʔϚωʔδ
37. ৽αʔϏε΍ࣾ಺αʔϏε΁ͷ֦ு
38. ৽αʔϏε΍ࣾ಺αʔϏε΁ͷ֦ு
39. 4BSB
    'SBNFXPSL
40. 4BSB
    'SBNFXPSL
41. 4BSB
    NJYJO
42. 4BSB
    NJYJO @include size(16px); @include size(64px, 32px); ؆୯αΠζࢦఆ
43. 4BSB
    NJYJO @include absolute(10px, 5px, $z: 999); BCTPMVUF
    ύοέʔδ
44. 4BSB
    NJYJO @include button_generator($red); @include button_generator ( $button_bg_from, $button_bg_to: $button_bg_from, $button_border: darken($button_bg_to, 7%), $button_text_shadow: darken($button_bg_to, 10%) ) ఆ൪ͷCVUUPO
45. 4BSB
    NJYJO @include tooltip; @include tooltip ( $tooltip_width: 200px, $triangle_position: top, // top, right, bottom, left $triangle_distance: 100px, $triangle_size: small, // small, large ) Ͳ͜Ͱ΋UPPMUJQ
46. 1VMM
    3FRVFTU Good job!
47. 3FDFOU
    5PQJD
48. 3FDFOU
    5PQJD Sara Responsive
49. Sara Responsive 3FDFOU
    5PQJD Not so good yet ..
50. ࣦഊஊ
51. ϝΠϯͷ$44͕ޮ͍ͯͳ͍ʁ ࣦഊஊ *&ͷ$44ηϨΫλʔ্ݶ 4095Over *&ͰσβΠϯ่͕Εͯ·͢
52. $44෼ׂ͠·͔͢ʁ ͍΍͍΍ɺແବ͕͋Δ͸ͣͳͷͰ ϦϑΝΫλϦϯά͠·͠ΐ͏Α ϜμͳJNQPSU΍FYUFOE͕ͳ͍͔ ௐ΂·͢ ରࡦ ೦ͷͨΊɺ։ൃ؀ڥͰ"MFSUͩ͠·͢
53. ରࡦ
    ։ൃ؀ڥͰͷ"MFSU Good job!
54. ରࡦ
    4$44ݟ௚͠ FYUFOEΛNJYJOʹม͑ͨΒ ສߦͷ$44͕ສߦʹͳΓ·ͨ͠
55. $44
    1SFQSPDFTTPSΛ࢖͏ͱ $44ͷྔ͕૿͑Δ܏޲ʹ͋Γ·͢ɻ దࡐదॴɺద੾ʹ࢖͍·͠ΐ͏ɻ
56. Sass for everyday cooking ? ຖ೔ͷྉཧͷͨΊͷSass?
57. ྑ͖ΫοΫύουମݧͷఏڙ
58. ݕূ݁Ռͷ൓ө ݕ ূ @include button; @include button(#ef6074); more better
59. ݕূ݁Ռͷ൓ө ݕ ূ @include button; @include button(#ef6074); @include button; @include button;
60. @mixin button ( $button_bg_from, $button_bg_to: $button_bg_from, $button_border: darken($button_bg_to, 7%), $button_text_shadow: darken($button_bg_to, 10%) ){ text-shadow: 0 -1px 0 $button_text_shadow; @if ($button_border == 'none') { border: none; } @elseif ($button_border == '') { border: none; } @else { border: 1px solid $button_border; } background: $button_bg_to; @include gradient($button_bg_from, $button_bg_to); &:hover { @if ($button_border == 'none') { border: none; } @elseif ($button_border == '') { border: none; } @else { border: 1px solid $button_border; } border: 1px solid darken($button_border, 3%); @include gradient(darken($button_bg_from, 3%), darken($button_bg_to, 3%)); } } ୯ͳΔUIύʔπͰ͸ͳ ͘ඞཁͳ෦෼ͷ֦ுΛ ڐ༰͢Δ ݕূ݁Ռͷ൓ө
61. ྑ͖ΫοΫύουମݧͷఏڙ ܕʹ͸Ίͳ͍ॊೈੑߴ͍ σβΠϯϑϨʔϜϫʔΫ
62. ඒຯͦ͠͏ͳσβΠϯ
63. 
    ྫ ɾ੨͸࢖Θͳ͍ ɾϨγϐϖʔδ΁ͷϦϯΫ৭͸྘ ɾϨγϐը૾͸શ෦ࠨճΓ
64. ܦݧͱײੑʹج͍ͮͨσβΠϯͷ ࢓૊Έʹ૊ΈࠐΉ ඒຯͦ͠͏ͳσβΠϯ
65. ͢͹΍͍։ൃαΠΫϧ
66. จࣈ৭ എܠ৭ ϦϯΫ৭ Ϙʔμʔ৭ Ϩγϐ৭ ΞΫηϯτ৭ #3c3c3c #faf3e3 #330000 #F5F1E1 #889B00 #ff9933 4BTTΛ࢖ͬͯม਺Խ
67. $branding_main: #4d2200 !default; $branding_accent: #ff9933 !default; $branding_support: #faf3e3 !default; $anchor: #330000 !default; $anchor_visited: #845f4b !default; $body: #3c3c3c !default; $body_bg: $branding_support !default; $recipe_title: #889B00 !default; $default_border: darken($body_bg, 5%) !default; ιʔείʔυ͔Β ࢀরՄೳͳ ΨΠυϥΠϯ 4BTTΛ࢖ͬͯม਺Խ
68. ͢͹΍͍։ൃαΠΫϧ ϘτϜΞοϓܕͷσβΠϯΨΠυϥΠϯ
69. ϘτϜΞοϓܕͷσβΠϯΨΠυϥΠϯ ܦݧͱײੑʹج͍ͮͨσβΠϯͷ ࢓૊Έʹ૊ΈࠐΉ ܕʹ͸Ίͳ͍ॊೈੑߴ͍ σβΠϯϑϨʔϜϫʔΫ
70. ϘτϜΞοϓܕͷσβΠϯΨΠυϥΠϯ ܦݧͱײੑʹج͍ͮͨσβΠϯͷ ࢓૊Έʹ૊ΈࠐΉ ܕʹ͸Ίͳ͍ॊೈੑߴ͍ σβΠϯϑϨʔϜϫʔΫ
71. Coding Designing
72. Coding Designing
73. Ҏ্ɺ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ΤϯδχΞ
    
    σβΠφʔ
    ืूத ΫοΫύουͷαʔϏε։ൃʹ͝ڵຯ͕ ͋Δํɺؾܰʹ͓੠͕͚͍ͩ͘͞ʂ @tikedaɹ takuji-ikeda@cookpad.com Special Thanks Photo by cookpad recipes and Flickr