Sass for everyday's cooking

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Agenda ࠓ೔࿩͢͜ͱ

Slide 6

Slide 6 text

ΫοΫύουͷ։ൃελΠϧͱ4BTT 4BTTΛ࢖ͬͨࣗࣾσβΠϯϑϨʔϜϫʔΫ ຖ೔ͷྉཧͷͨΊͷ4BTTʁ

Slide 7

Slide 7 text

About Cookpad’s Coding Style ΫοΫύουͷ։ൃελΠϧͱSass

Slide 8

Slide 8 text

Engineer + Designer ࣌఺ 45ਓ

Slide 9

Slide 9 text

ΫοΫύουͷ։ൃελΠϧ •Sass / HamlʢσβΠφʔɾΤϯδχΞ໰Θͣʣ •GitHubʢσβΠφʔɾΤϯδχΞ໰Θͣʣ •ฏߦͯ͠ෳ਺ͷϓϩδΣΫτ͕ਐΉ •cookpad.comҎ֎ͷαʔϏε΋ଓʑ։ൃ •σόΠε໰ΘͣαʔϏε։ൃ •ૣ͍։ൃαΠΫϧʢ1೔Կ౓΋σϓϩΠʣ

Slide 10

Slide 10 text

UI UX user team Designer Engineer Directer Engineer Engineer Directer Directer Engineer Designer Engineer

Slide 11

Slide 11 text

ΈΜͳͰ։ൃ Code Design Function Quality Speed

Slide 12

Slide 12 text

ΈΜͳͰ։ൃ Code (Sass) Design Function Quality Speed

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

$44 4$44DPEJOHTUZMF •Use a line break between selecters button, button:visited, button:hover { } button, button:visited, button:hover { } #"% (00%

Slide 15

Slide 15 text

$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%

Slide 16

Slide 16 text

•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

Slide 17

Slide 17 text

ίʔυϨϏϡʔ

Slide 18

Slide 18 text

ίʔυϨϏϡʔ ϧʔϧ͕͋ΔͷͰɺ !JODMVEF͸Ұ൪্Ͱ͢ मਖ਼͠·͢

Slide 19

Slide 19 text

ίʔυϨϏϡʔ

Slide 20

Slide 20 text

ίʔυϨϏϡʔ ͜ͷϨϕϧͷΠϯσϯτͷ࣌͸վߦ͕ೖͬ ͍ͯͳͯ͘΋͏Ұݸਂ͍Ϩϕϧͩͱೖͬͯ ͍ΔͷͬͯԿ͔ҙਤ͕͋ΔͷͰ͠ΐ͏͔ʁ ΨΠυϥΠϯͩͱࢠཁૉͱଐੑͷؒʹ ͸ۭߦ͋Γɺࢠཁૉ͕ฒͿ৔߹͸ۭߦ ͳͬ͠Ά͍ΜͰ͢ΑͶɻ !UBLVKJJLFEB͞ΜɺͲ͏Ͱ͠ΐ ͭͷ$44ϑΝΠϧͷதͰɺͲ͏͍͏৔ ߹ʹۭߦΛ͚͋Δͷ͔ͱ͍͏ϧʔϧ͸࣋ͪ ·͠ΐ͏ɻࠓޙ·ͱ·Γ͕ͳ͘ͳΔΑ͏Ͱ ͨ͠ΒΨΠυϥΠϯԽ͠·͢ɻ

Slide 21

Slide 21 text

4$44ߏ੒ Sara Sara_settings cookpad.scss partial pages common extensions @import

Slide 22

Slide 22 text

4$44ߏ੒ Sara Sara_settings cookpad.scss partial pages common extensions ݶఆϢʔβʔͳͲҰ࣌తͳػೳ༻ ԣஅతʹ࢖͍ͬͯΔUIίϯϙʔωϯτ ϖʔδ͝ͱͷελΠϧ༻ Sara͕·͔ͳ͑ͳ͍جຊελΠϧ @import

Slide 23

Slide 23 text

4$44ߏ੒ Sara Sara_settings extension_a.scss @import extension_b_smartphone.scss

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Sara SassΛ࢖ͬͨࣗࣾσβΠϯϑϨʔϜϫʔΫ

Slide 26

Slide 26 text

Sara?

Slide 27

Slide 27 text

皿美�味しい料理を支える、料理に合う美�しい皿

Slide 28

Slide 28 text

user team

Slide 29

Slide 29 text

team

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

ΫοΫύουͷσβΠϯͷந৅Խ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ม਺ʹΑΔΧϥʔίʔυͳͲͷ؅ཧ

Slide 36

Slide 36 text

σόΠεΛ·͍ͨͩΧϥʔϚωʔδ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

4BSB'SBNFXPSL

Slide 40

Slide 40 text

4BSB'SBNFXPSL

Slide 41

Slide 41 text

4BSBNJYJO

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

4BSBNJYJO @include tooltip; @include tooltip ( $tooltip_width: 200px, $triangle_position: top, // top, right, bottom, left $triangle_distance: 100px, $triangle_size: small, // small, large ) Ͳ͜Ͱ΋UPPMUJQ

Slide 46

Slide 46 text

1VMM3FRVFTU Good job!

Slide 47

Slide 47 text

3FDFOU5PQJD

Slide 48

Slide 48 text

3FDFOU5PQJD Sara Responsive

Slide 49

Slide 49 text

Sara Responsive 3FDFOU5PQJD Not so good yet ..

Slide 50

Slide 50 text

ࣦഊஊ

Slide 51

Slide 51 text

ϝΠϯͷ$44͕ޮ͍ͯͳ͍ʁ ࣦഊஊ *&ͷ$44ηϨΫλʔ্ݶ 4095Over *&ͰσβΠϯ่͕Εͯ·͢

Slide 52

Slide 52 text

$44෼ׂ͠·͔͢ʁ ͍΍͍΍ɺແବ͕͋Δ͸ͣͳͷͰ ϦϑΝΫλϦϯά͠·͠ΐ͏Α ϜμͳJNQPSU΍FYUFOE͕ͳ͍͔ ௐ΂·͢ ରࡦ ೦ͷͨΊɺ։ൃ؀ڥͰ"MFSUͩ͠·͢

Slide 53

Slide 53 text

ରࡦ։ൃ؀ڥͰͷ"MFSU Good job!

Slide 54

Slide 54 text

ରࡦ4$44ݟ௚͠ FYUFOEΛNJYJOʹม͑ͨΒ ສߦͷ$44͕ສߦʹͳΓ·ͨ͠

Slide 55

Slide 55 text

$441SFQSPDFTTPSΛ࢖͏ͱ $44ͷྔ͕૿͑Δ܏޲ʹ͋Γ·͢ɻ దࡐదॴɺద੾ʹ࢖͍·͠ΐ͏ɻ

Slide 56

Slide 56 text

Sass for everyday cooking ? ຖ೔ͷྉཧͷͨΊͷSass?

Slide 57

Slide 57 text

ྑ͖ΫοΫύουମݧͷఏڙ

Slide 58

Slide 58 text

ݕূ݁Ռͷ൓ө ݕ ূ @include button; @include button(#ef6074); more better

Slide 59

Slide 59 text

ݕূ݁Ռͷ൓ө ݕ ূ @include button; @include button(#ef6074); @include button; @include button;

Slide 60

Slide 60 text

@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ύʔπͰ͸ͳ ͘ඞཁͳ෦෼ͷ֦ுΛ ڐ༰͢Δ ݕূ݁Ռͷ൓ө

Slide 61

Slide 61 text

ྑ͖ΫοΫύουମݧͷఏڙ ܕʹ͸Ίͳ͍ॊೈੑߴ͍ σβΠϯϑϨʔϜϫʔΫ

Slide 62

Slide 62 text

ඒຯͦ͠͏ͳσβΠϯ

Slide 63

Slide 63 text

ྫ ɾ੨͸࢖Θͳ͍ ɾϨγϐϖʔδ΁ͷϦϯΫ৭͸྘ ɾϨγϐը૾͸શ෦ࠨճΓ

Slide 64

Slide 64 text

ܦݧͱײੑʹج͍ͮͨσβΠϯͷ ࢓૊Έʹ૊ΈࠐΉ ඒຯͦ͠͏ͳσβΠϯ

Slide 65

Slide 65 text

͢͹΍͍։ൃαΠΫϧ

Slide 66

Slide 66 text

จࣈ৭ എܠ৭ ϦϯΫ৭ Ϙʔμʔ৭ Ϩγϐ৭ ΞΫηϯτ৭ #3c3c3c #faf3e3 #330000 #F5F1E1 #889B00 #ff9933 4BTTΛ࢖ͬͯม਺Խ

Slide 67

Slide 67 text

$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Λ࢖ͬͯม਺Խ

Slide 68

Slide 68 text

͢͹΍͍։ൃαΠΫϧ ϘτϜΞοϓܕͷσβΠϯΨΠυϥΠϯ

Slide 69

Slide 69 text

ϘτϜΞοϓܕͷσβΠϯΨΠυϥΠϯ ܦݧͱײੑʹج͍ͮͨσβΠϯͷ ࢓૊Έʹ૊ΈࠐΉ ܕʹ͸Ίͳ͍ॊೈੑߴ͍ σβΠϯϑϨʔϜϫʔΫ

Slide 70

Slide 70 text

ϘτϜΞοϓܕͷσβΠϯΨΠυϥΠϯ ܦݧͱײੑʹج͍ͮͨσβΠϯͷ ࢓૊Έʹ૊ΈࠐΉ ܕʹ͸Ίͳ͍ॊೈੑߴ͍ σβΠϯϑϨʔϜϫʔΫ

Slide 71

Slide 71 text

Coding Designing

Slide 72

Slide 72 text

Coding Designing

Slide 73

Slide 73 text

Ҏ্ɺ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ΤϯδχΞσβΠφʔืूத ΫοΫύουͷαʔϏε։ൃʹ͝ڵຯ͕ ͋Δํɺؾܰʹ͓੠͕͚͍ͩ͘͞ʂ @tikedaɹ takuji-ikeda@cookpad.com Special Thanks Photo by cookpad recipes and Flickr