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

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

Q_FĬ #*1/7

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

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

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

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

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

ŮRMd *662 #*1/7

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

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

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

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

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

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

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

-&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

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

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

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

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

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

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

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

?/8.9;:;9: +;1< D @/,53= D:;9:F+;1< 79C D:;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

,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'&

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

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

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/

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==97 6/0= ;+.3><:A ,9;./; ,9==97 6/0= ;+.3><:A @/,53= ,9;./; ,9==97 ;312= ;+.3><:A ,9;./; ,9==97 ;312= ;+.3><:A F 56;. %55

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. 79C 638/+; 1;+.3/8==9: 000 ,+-51;9>8. 9 638/+; 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Šõ

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

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

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

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

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

<+<<<+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

<=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Őý

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

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

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

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

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

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

Shootout?

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

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

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

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

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

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

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

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

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

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

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

ಁաత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

¯±¬{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 żĜ^ŚĹ

098= <3C/8 D 30>83=8 3<:AD 098= <3C/8 098= <3C/;/79?/
>83=8 ;/7 F/6</D /;;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?

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

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

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

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

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

·ͱΊ OcÍcª_ƀgę

ݡ͍ϓϦϓϩηοαબͼΛ ėĲ *';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

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çü

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-

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

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)

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

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

More Decks by Ayumu Sato

Other Decks in Programming

Featured

Transcript