Sass for everyday's cooking

Sass for everyday's cooking

Ce1c5fa82c64054a797d4a97646e9b0f?s=128

Takuji Ikeda

January 12, 2013
Tweet

Transcript

  1. ΫοΫύουגࣜձࣾ αʔϏεσβΠϯ෦αʔϏεσβΠϯάϧʔϓ ஑ా୓࢘ɹσβΠφʔ ຖ೔ͷྉཧͷͨΊͷSass $44/JUF-1

  2. ࣗݾ঺հ Sass Less,CSS ೥݄ʙ ʙ೥݄ ஑ా୓࢘ @tikeda (scss)

  3. None
  4. None
  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

  13. None
  14. $44 4$44DPEJOHTUZMF •Use a line break between selecters button, button:visited,

    button:hover { } button, button:visited, button:hover { } #"% (00%
  15. $44 4$44DPEJOHTUZMF •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$44DPEJOHTUZMF
  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

  30. None
  31. None
  32. None
  33. ΫοΫύουͷσβΠϯͷந৅Խ

  34. 6*ίϯϙʔωϯτͷڞ༗

  35. ม਺ʹΑΔΧϥʔίʔυͳͲͷ؅ཧ

  36. σόΠεΛ·͍ͨͩΧϥʔϚωʔδ

  37. ৽αʔϏε΍ࣾ಺αʔϏε΁ͷ֦ு

  38. ৽αʔϏε΍ࣾ಺αʔϏε΁ͷ֦ு

  39. 4BSB'SBNFXPSL

  40. 4BSB'SBNFXPSL

  41. 4BSBNJYJO

  42. 4BSBNJYJO @include size(16px); @include size(64px, 32px); ؆୯αΠζࢦఆ

  43. 4BSBNJYJO @include absolute(10px, 5px, $z: 999); BCTPMVUFύοέʔδ

  44. 4BSBNJYJO @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. 4BSBNJYJO @include tooltip; @include tooltip ( $tooltip_width: 200px, $triangle_position: top,

    // top, right, bottom, left $triangle_distance: 100px, $triangle_size: small, // small, large ) Ͳ͜Ͱ΋UPPMUJQ
  46. 1VMM3FRVFTU Good job!

  47. 3FDFOU5PQJD

  48. 3FDFOU5PQJD Sara Responsive

  49. Sara Responsive 3FDFOU5PQJD 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. $441SFQSPDFTTPSΛ࢖͏ͱ $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