Stylusが目指すCSSプリプロセッサ

Slide 1

Slide 1 text

4UZMVT͕໨ࢦ͢ $44ϓϦϓϩηοα +6' Q_FĬ#*1/7 ;$'4)'06

Slide 2

Slide 2 text

Q_FĬ #*1/7

Slide 3

Slide 3 text

;$'4)'06 "'$'8'.12'4

Slide 4

Slide 4 text

*#8'.1) 2==:2+?/691 +B>7><+=9 -97

Slide 5

Slide 5 text

'0,#10+67$ 2==:<13=2>, -97/84+9<<

Slide 6

Slide 6 text

7$.+%-';^Œ½ 㱯㱼ʆ 㱯ƂŖŘ 2==:@@@ :>,63-5/B 4:,6914+?+<-;3:=*7?-*,+-5,98/4< 2=76

Slide 7

Slide 7 text

)5.-+BWB4DSJQU εϚʔτϑΥϯαΠτ࣮ફߨ࠲ ğPvŃíºö/#<10^} WebαΠτ੍࡞ऀͷͨΊͷ HTML5+JavaScriptεϚʔτϑΥϯαΠτ࣮ફߨ࠲ ڞஶ: ࠤ౻ า, ҆౻ ݐҰ, ਿຊ ٢ষ http://www.amazon.co.jp/dp/4774154113/

Slide 8

Slide 8 text

ŮRMd *662 #*1/7

Slide 9

Slide 9 text

QDO\^\_YZXpj selM]W`[Onb daPcVmgFJAHOBt !7<086CmgG!!\^\_YZX RLS

Slide 10

Slide 10 text

Slide 11

Slide 11 text

࠷ॳʹίϛοτ͞Εͨ೔ (JU)VC Sass Jun 30, 2006 LESS May 03, 2009 Stylus Dec 09, 2010 DXrREƍ

Slide 12

Slide 12 text

q 8IBUJT 01&'šcª Ì÷RXīř°ħŶaėĲJƌÙ ¹b 1.19#;%*7-JƂŃ @':24'55p,#&'wÂ[X¼

Slide 13

Slide 13 text

4UZMVTͱओཁΞϓϦͷରԠ >3()-7 >!8&0-1)");7 !7<0864%'/%+) >-9) )03%(# >5827+5827'3275-&67<086 =5)%1:)%9)5 =$)&!735127)00-

Slide 14

Slide 14 text

✓DXrR¤ðKcęb ✓¡|±ðKcęb ✓ªwŤŅRXs ✓ōcƀĎŘwŇ[]nr[Xs ✓ÁrIcbaue

Slide 15

Slide 15 text

ϓϦϓϩηοαวྺͱ 4UZMVTΛ࢖͍࢝ΊͨܦҢ A6;.75

Slide 16

Slide 16 text

࠷ॳ͸-&44͔Β wiXiXĝMcRx`E ªÃ[]lqF ūĲdIrƇuTLaEcJśEa

Slide 17

Slide 17 text

-&44$44͔Β཭Εͨ͘ͳ͍ظ `aIf_e[ZXYcgHJPWT^]RVUMh 098=<3C/:A 2/+./;D 2D 098=<3C/098=<3C/ 098=@/312=,96. F :D098=<3C/098=<3C/ +D=/A=./-9;+=398898/ 29?/;D ,9;./;@3.=2:A F F F F

Slide 18

Slide 18 text

w -&44ͯ͠Έͨײ૝ čŷQ°őŅQdśE p[fsīřJĺŵsaMċSt X_Gez¬_I¬_I

Slide 19

Slide 19 text

-&44!FYUFOE΍JGFMTF GPSdJO͕ཉ͍͠ظ /A=/8.dQMUL ,=8 ,=8:;37+;B ,=8-98.+;B ,=8.+81/;D ,9;./;;+.3><:A F @2/8NL K30/68.-969;,6+-5 F 73A38+ @2/86312=8/<<+ D ,+-51;9>8.-969;@23=/ F

Slide 20

Slide 20 text

j 4BTTʹվफ͢Δࠓߋײ EkQr£¥±běãtax]

Slide 21

Slide 21 text

6;.75 2==:6/+;8,99<= 13=2>, -97<=B6><

Slide 22

Slide 22 text

; 4UZMVT͍͍Ͷʂ īřnîM]CĘREREEWƍ VR]C6;.75wñmkRX

Slide 23

Slide 23 text

ັྗతͳϙΠϯτͷ঺հ ƂŃŗcIrþŀŒ½

Slide 24

Slide 24 text

$444ZOUBYͱॊೈੑ 6;.75cĞnËuXĸdũŰ|¯ |«|¯¯|«c ¶ęw ±TtħŶĊ 9-%!7<0865)0)%6)(!!!<27%;!844357"303:%<',8/

Slide 25

Slide 25 text

?/8.9;:;9:+;1< D @/,53=D:;9:F+;1< 79CD:;9:F+;1< D:;9:F+;1< F ,9;./;;+.3>< D ?/8.9;,9;./;;+.3><+;1>7/8=< F ,>==98 + ,>==98 38:>='=B:/<>,73=( 38:>='=B:/,>==98(D ,9;./;;+.3><:A:A -969;,6+-5 29?/;D ,+-51;9>8.,6+-5 -969;@23=/ F F ;06#:ƐĚóėĲwĳIRXĩė°żſń/+:+0 ,>==98 + ,>==98 38:>='=B:/<>,73=( 38:>='=B:/,>==98(D @/,53=,9;./;;+.3><:A:A 79C,9;./;;+.3><:A:A ,9;./;;+.3><:A:A -969; F ,>==9829?/; + ,>==9829?/; 38:>='=B:/<>,73=(29?/; 38:>='=B:/,>==98(29?/;D ,+-51;9>8. -969;000 F 56;. %55

Slide 26

Slide 26 text

,9.BD 098=:A !/6?/=3-+ 6919D ,9;./;;+.3><:A F F ħŶĊƐūád¨¯^C|¯¯|«nàř ,9.BD 098=:A !/6?/=3-+ 6919D ,9;./;;+.3><:A F F (7.. ,9.BD 098=:A !/6?/=3-+ 6919D ,9;./;;+.3><:A F F ,9.B 098=:A !/6?/=3-+ 6919 ,9;./;;+.3><:A 4'/18'& 4'/18'& =?4'/18'&

Slide 27

Slide 27 text

αϙʔτ͢Δߏจɾػೳ ĞnĻĆńacd{cqFażſń/+:+0 ¹b#55Łģ^CêĢńaīřcïÝw ± +('.5'p(14+0«±a`cÖąĩė ŜĂ°ŪŏƃÈa`cîĂa«|¯ƃĖa`

Slide 28

Slide 28 text

4;6;.75 2==:6/+;8,99<= 13=2>, -97<=B6><=;B 2=76

Slide 29

Slide 29 text

OJCNJYJOϥΠϒϥϦ 6;.75c/+:+0©|©ª 76+.+6;{p8'0&1424'(+:cŠõwĔÅ żſńa/+:+0cĻĆJśMÒ]Et 9-%;7)2(!7<086:-7,%2-&"303:%<',8/

Slide 30

Slide 30 text

37:9;=83, ,>==98D ,9;./;;+.3><:A F ,>==98D ,9;./;;+.3><,9==97:A F ¯±¬{cŠõ_{đÿ ,>==98D @/,53=,9;./;;+.3><:A ,9;./;;+.3><:A F ,>==98D @/,53=,9;./;,9==976/0=;+.3><:A ,9;./;,9==976/0=;+.3><:A @/,53=,9;./;,9==97;312=;+.3><:A ,9;./;,9==97;312=;+.3><:A F 56;. %55

Slide 31

Slide 31 text

37:9;=83, ,9.BD ,+-51;9>8.638/+;1;+.3/8==9:@23=/,6+-5 F ,9.BD ,+-51;9>8.@/,53=1;+.3/8=638/+;6/0==9:6/0=,9==97 -969;<=9:000 -969;<=9: ,+-51;9>8.@/,53=638/+;1;+.3/8==9:000 ,+-51;9>8.79C638/+;1;+.3/8==9:000 ,+-51;9>8.9638/+;1;+.3/8==9:000 ,+-51;9>8.7<638/+;1;+.3/8==9:000 ,+-51;9>8.638/+;1;+.3/8==9:000 F 56;. %55 ¯±¬{_ăę»ĕĊcŠõ

Slide 32

Slide 32 text

37:9;=83, 6919D 37+1/3716919 7+38 :81:A:A F «øýbĈSXłÊy|« :cûƂ 6919D ,+-51;9>8.37+1/>;63716919 7+38 :81 F 7/.3++66+8.@/,53=738./?3-/:3A/6;+=39 D 6919D ,+-51;9>8.37+1/>;63716919 7+38A :81 @/,53=,+-51;9>8.<3C/:A:A ,+-51;9>8.<3C/:A:A F F 56;. %55

Slide 33

Slide 33 text

37:9;=83, ,+-5=9=9:D 03A/.,9==97;312= F =+,6/90-98=/8=<D +,<96>=/=9::A6/0=:A F ./<-;3:=398D 9?/;069@/663:<3< F ÇÕa{cŻÚ ,+-5=9=9:D :9<3=39803A/. ,9==97 ;312= F =+,6/90-98=/8=<D :9<3=398+,<96>=/ =9::A 6/0=:A F ./<-;3:=398D @23=/<:+-/89@;+: 9?/;069@23../8 9=/A=9?/;069@/663:<3< =/A=9?/;069@/663:<3< F 56;. %55

Slide 34

Slide 34 text

!FYUFOEͷαϙʔτ #55^HƊĦlcz¬ +0).'.#55±¯w ± ':06'&kXd':6'0&5_R]Ãŀ 9-%!7<086+)76);7)2("303:%<',8/

Slide 35

Slide 35 text

7/<<+1/D 098=<3C/:A :+..381:A:A ,9;./;:A<963./// ,9;./;;+.3><:A F @+;8381D /A=/8.< 7/<<+1/ -969;B/669@ F /;;9;D /A=/8.< 7/<<+1/ -969;;/. F 0+=+6/;;9;D /A=/8.< /;;9; 098=@/312=,96. F +0).'.#55±¯nT[KsC':06'& ± 7/<<+1/ @+;8381 /;;9; 0+=+6/;;9;D 098=<3C/:A :+..381:A:A ,9;./;:A<963./// ,9;./;;+.3><:A F @+;8381D -969;00 F /;;9; 0+=+6/;;9;D -969;0 F 0+=+6/;;9;D 098=@/312=,96. F 56;. %55

Slide 36

Slide 36 text

ΤϥʔϨϙʔςΟϯά ¬±¾K~©±ŎČcÒÙJųE qMDt6;21wª^ĨŇ^Kt ĩėŨĤw`uMrEÞøbŞ[]EtIcŭƁň 9-%!7<08696!!!96!!)55355)4357-2+"303:%<',8/

Slide 37

Slide 37 text

<+<<<+7:6/ <-<< $B8=+A/;;9;"8?+63.$$+0=/; ,+-51;9>8.099 /A:/-=/.@+<'0+36( 98638/90<+7:6/ <-<< &=;+-/09;,+-5=;+-/ şŉdppµŦÓ^CÏŧėòa`c6;21wĨÒRaE 6/<<-<+7:6/ 6/<< #+; ;;9;$B8=+A ;;9;98638/38<+7:6/ 6/<< 09;738:>=D ,+-51;9>8.099'0+36( F ^şŉdŦÓba[XJCĨŇÙd#55qsľm

Slide 38

Slide 38 text

<=B6><<+7:6/ <=B6 G89./*79.>6/<<=B6><,38<=B6>< =2;9@/;; ) ;;9;<+7:6/ <=B6 E7+;138:A EF E,9.BD E09;738:>=D E,+-51;9>8.099'0+36( EF EF -+889=:/;09;7099'0+36 ( +=09;738:>=<+7:6/ <=B6 +=,9.B<+7:6/ <=B6 ŦÓaşŉ_CÏŧėòcĴÎ6;21nĨÒTtŐý

Slide 39

Slide 39 text

ը૾Ϧιʔεͷૢ࡞ؔ܎ #6#!/#)' AĪĵ^łÊIr±!cûƂw ± .7)+056;.75524+6' .7)+056;.75.'/10#&' A24+6'w ±Tt©|¯JDt

Slide 40

Slide 40 text

ઌਓ͕໨ࢦ͢ͱ͜ΖΛ ৼΓฦΔ £ũŰ_ª

Slide 41

Slide 41 text

W ϝλݴޠʁϓϦϓϩηοαʁ £ũŰ DtũŰwūźTtXmc ²ĭ³cŌëbDtùŀcũŰ ª ť×bĄ[XėòŔĕ¡a` ´ĵÉcqFaÑļwŞF

Slide 42

Slide 42 text

4BTTߴػೳͳϝλݴޠ /'6#.#0)7#)'106121( c³¿bDt£ũŰ ŋcŊæ8#4+#$.'°/+:+0°':6'0& ©¢¯ũŰ·lcÖąĩė

Slide 43

Slide 43 text

-&44ࣗવͳϓϦϓϩηε *'&;0#/+%56;.'5*''6.#0)7#)' ÛńĊŴwÚGX|«± cĚóėĲwĳIR]Et œĥ_R]ôŖJÀE

Slide 44

Slide 44 text

ϝλݴޠ دΓ ϓϦϓϩηοα دΓ

Slide 45

Slide 45 text

Shootout?

Slide 46

Slide 46 text

4BTTͷ໨ඪ ĩžÜcXmb ĀÙaƋįĵũŰwÂt -&44ͷ໨ඪ ėĲwĳIR] ¯«aīřwÚGt

Slide 47

Slide 47 text

4BTT೿ dīřJúaM]µÇ -&44೿ #55dīřJîTL]ƈŨ

Slide 48

Slide 48 text

4BTT೿ dīřJúaM]µÇ -&44೿ #55dīřJîTL]ƈŨ ໨ඪͷҧ͍͔Β͘Δ૬ҧ

Slide 49

Slide 49 text

$44Βͯ͘͠ ߴػೳͳΒྑ͍ͷ͔ʁ #55_cĶwémtŨı

Slide 50

Slide 50 text

4UZMVT͕໨ࢦ͢ $44ϓϦϓϩηοα ªJďGtåƉcŤŅR

Slide 51

Slide 51 text

े෼ͳػೳ $44ͬΆ͞ ྑ͍τίऔΓ

Slide 52

Slide 52 text

Slide 53

Slide 53 text

$44Β͍͠ߴػೳݴޠ ͜ΕͰΈΜͳ޾ͤʁ kYŨıR]EaEåƉhA

Slide 54

Slide 54 text

4UZMVTཱ͕ͪ޲͔͏ઌ İEdśMaraE ApdêĢ ƋīřbŁģRXŢƆQ AÇÕQ_þKĕGcĘXaűƉ

Slide 55

Slide 55 text

p Ԛ͍$44͸ྑ͘ͳΒͳ͍ ªdwƄŝRaE ÒÙQutcäŴdC ¯|«ØcūźbĀMÆóTt "0B9>;@;3=/:99;$$+:;/:;9-/<<9;@98=7+5/3=<>-56/<< CSS Pre-Processors: Stylus, Less & Sass https://speakerdeck.com/bermonpainter/css-pre-processors-stylus-less-and-sass?slide=23

Slide 56

Slide 56 text

x ߴػೳʹ༝དྷͨ͠ෳࡶ͞ ªcèĠīřbqtİĦ îĂaīřbķu°ēsçQut ŢƆĊ_EFĘREåƉwĒZŸxY %2/:966>=398-+>

Slide 57

Slide 57 text

k ͭͷ໰୊ͷࠞࡏ cåƉ AĢģńaŬŪ ªcåƉ AŢƆaĐŲÜbqtÕÇcĔÅ

Slide 58

Slide 58 text

ಁաతNJYJOͷΞϓϩʔν 4#052#4'06/+:+05#4'70+37'616;.75#0&#4'# +0%4'&+$.;219'4(7.9#;'0*#0%';17456;.'5*''65 9-%"5%264%5)271-;-26"5<!7<086

Slide 59

Slide 59 text

¯±¬{cŠõbltâŋc/+:+0 73A38,9A<3C381+;1 D @/,53=,9A<3C381+;1 79C,9A<3C381+;1 ,9A<3C381+;1 F -98=+38/;D 38-6>./,9A<3C381,9;./;,9A F ,9A<3C381+;1 D @/,53=,9A<3C381+;1 79C,9A<3C381+;1 ,9A<3C381+;1 F -98=+38/;D ,9A<3C381,9;./;,9A F 5%55 ,9A<3C381+;1 D @/,53=,9A<3C381+;1 79C,9A<3C381+;1 ,9A<3C381+;1 F -98=+38/;D ,9A<3C381,9;./;,9A F 56;. .'55 żſń/+:+0 >> 6;.75d{c qFbŤGtIr żĜ^ŚĹ

Slide 60

Slide 60 text

098=<3C/8 D 30>83=8 3<:AD 098=<3C/8 098=<3C/;/79?/>83=8 ;/7 F/6D /;;9;&:A+<>83= F F żſń(1065+<'cÐöŕ4'/Õŀc±« ,9.BD 098=<3C/:A 098=<3C/ ;/7 F /+:+056;. 176276%55 ,9.BD 098=<3C/:A F 56;.'56;. ŢƆaĐŲÜ¬|¦± j_x`a¬|¦± via. font-size using rem with fallback in Stylus | Why Do We Fall?

Slide 61

Slide 61 text

ª^ øIbĐŲÜTt¬|¦± żſń/+:+0wŽR] đÿRX{wĔÅ i /+:+056;. wĢģńb ƅ¸R]ĝM¬|¦± ŢƆQbĮwßruU rRM|«öŕbùĉ l 56;.'56;.

Slide 62

Slide 62 text

37:9;=83, 6919D 37+1/3716919 7+38 :81:A:A F 0+$cÄÐÒ«øýbĈSXłÊ :cûƂ 6919D ,+-51;9>8.37+1/>;63716919 7+38 :81 F 7/.3++66+8.@/,53=738./?3-/:3A/6;+=39 D 6919D ,+-51;9>8.37+1/>;63716919 7+38A :81 @/,53=,+-51;9>8.<3C/:A:A ,+-51;9>8.<3C/:A:A F F 56;. %55

Slide 63

Slide 63 text

37:9;=83, ,+-5=9=9:D 03A/.,9==97;312= F =+,6/90-98=/8=<D +,<96>=/=9::A6/0=:A F ./<-;3:=398D 9?/;069@/663:<3< F 0+$cÄÐÒÇÕa{/+:+0cŻÚ ,+-5=9=9:D :9<3=39803A/. ,9==97 ;312= F =+,6/90-98=/8=<D :9<3=398+,<96>=/ =9::A 6/0=:A F ./<-;3:=398D @23=/<:+-/89@;+: 9?/;069@23../8 9=/A=9?/;069@/663:<3< =/A=9?/;069@/663:<3< F 56;. %55

Slide 64

Slide 64 text

ࠞࡏͨ͠໰୊ͷ ϨΠϠʔΛ෼͚ͯΫϦΞʹ rioK@TII?fqN!!VhEU

Slide 65

Slide 65 text

6*'/156.+-'*+)*.'8'.56;.'5*''6.#0)7#)' ƋīřI\CZox_wĝNtª

Slide 66

Slide 66 text

·ͱΊ OcÍcª_ƀgę

Slide 67

Slide 67 text

ݡ͍ϓϦϓϩηοαબͼΛ ėĲ *';06#: ÃGtīř8#+.#$.'('#674'5 ¢§{1//70+6; ÷ŞĽì7$;85 ĢābćţancdƑ Ěó®±±_cņĊdƑ ))4-9)273!!5)453')66356 ,774:::60-()6,%5)2)79)5)/-%())4(-9)-273'6645)453')66356

Slide 68

Slide 68 text

4BTTKTˠ4UZMVTˠ #55,5ġ#55J5%55w ±TtØ B 6;.75ÔġƎ+0&'06#6+1056;.'cl ±Ə B 6;.75¸ġƎ56;.'c ±Ə B 6;.75ăġ4'914-cůĿ¬±¯hcçü

Slide 69

Slide 69 text

SFXPSL #4$+64#4;24'241%'55+0).+$4#4;(1401&',5 8'0&1424'(+:'5%7561/2412'46+'5+/#)' +0.+0+0)'#5+0)(70%6+105/'&+#/#%415 *6625 )+6*7$%1/8+5+10/'&+#4'914-

Slide 70

Slide 70 text

5IBOLZPV͓͠·͍ *662 #*1/7 #*1/7 )+6*7$%1/#*1/7 ⌂ TQFDJBMUIBOLT!DTTSBEBS

Slide 71

Slide 71 text

1IPUP$SFEJUTUIBOLT 3%(730),,774:::*0-'/5'314,3736'&08) !0))4-2+k,774:::*0-'/5'314,3736,%26)0 !4%')!,8770)2()%938532%( ,774:::*0-'/5'31 4,3736.859)7632 64%'),774:::*0-'/5'314,3736 !30%5%2)06,774:::*0-'/5'314,3736.)5)1<0)9-2)()6-+2 33(5-)2(6,774:::*0-'/5'314,37362+11)18(% 0-)2965)(%735,774:::*0-'/5'314,373667)%14-5%7)