Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

2013年の1月にCSS Nite LP26 で講演した、Stylusについてのスライドです。今となっては開発者のTJ、reworkをcomponentのエコシステムに入れたり、ラッパー書いたりしていて、stylusへの関心はすっかり薄れていそう。LearnBoost名義としてメンテされるとは思いますが。

参考: http://cssnite.jp/archives/post_2500.html

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

January 12, 2013
Tweet

Transcript

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

  2. Q_FĬ #*1/7 

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

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

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

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

  7. )5.- +BWB4DSJQU εϚʔτϑΥϯαΠτ࣮ફߨ࠲ ğPvŃíºö/#<10^}‘ƒ  WebαΠτ੍࡞ऀͷͨΊͷ HTML5+JavaScriptεϚʔτϑΥϯαΠτ࣮ફߨ࠲ ڞஶ: ࠤ౻ า,

    ҆౻ ݐҰ, ਿຊ ٢ষ http://www.amazon.co.jp/dp/4774154113/
  8. ŮRMd *662 #*1/7 

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

  10. 

  11. ࠷ॳʹίϛοτ͞Εͨ೔ (JU)VC Sass Jun 30, 2006 LESS May 03, 2009

    Stylus Dec 09, 2010  DXrREƍ
  12. q 8IBUJT 01&'šcžªž­Œ‘‡ Ì÷RXīř°ħŶaėIJJƌÙ ¹b 1.19#;%*7-JƂŃ @':24'55p,#&'wÂ[X¼ 

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

  14. ✓DXrR¤—ðKcęb ✓¡|•±ðKcęb ✓žªž­Œ‘‡wŤŅRXs ✓ō cƀĎŘwŇ[]nr[Xs ✓ÁrIc‚‘…baue 

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

  16. ࠷ॳ͸-&44͔Β wiXiXĝMcRx`E žªž­Œ‘‡Ã[]lqF ūIJdIrƇuTLaEcJśEa 

  17. -&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 
  18. w -&44ͯ͠Έͨײ૝ čŷQ°őŅQdśE p[fsīřJĺŵsaMċSt X_Gez¬_I¬_I 

  19. -&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 
  20. j 4BTTʹվफ͢Δࠓߋײ EkQr£Š¥±běãtax] 

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

  22. ; 4UZMVT͍͍Ͷʂ īřnîM]CĘRER‘†EEWƍ VR]C6;.75wñmkRX 

  23. ັྗతͳϙΠϯτͷ঺հ ƂŃŗc­„IrþŀŒ½ 

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

  25.  ?/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#:ƐĚóėIJwijIRXĩė°żſń/+:+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
  26.  ,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'&
  27.  αϙʔτ͢Δߏจɾػೳ ĞnĻĆńacdž­™’{cqFażſń/+:+0 ¹b#55Łģ^CêĢńaīřcïÝw‡ ±” +('.5'p(14+0«±ža`cÖąĩė ŜĂ°ŪŏƃÈa`cîĂaš«”|¯ƃĖa`

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

  29. 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/

  30.  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
  31.  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Šõ
  32.  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
  33.  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
  34. !FYUFOEͷαϙʔτ #55^HƊĦlcz¬ +0).'.#55™Ž±¯w‡ ±” ':06'&kXd':6'0&5_R]Ãŀ  9-%!7<086+)76);7)2("303:%<',8/

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

  37.  <+<<<+7:6/ <-<< $B8=+A/;;9;"8?+63.$$+0=/; ,+-51;9>8.099 /A:/-=/. @+<'0+36( 98638/90<+7:6/ <-<< &</

    =;+-/09;,+-5=;+-/ şʼndppµŦÓ^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  ^şʼndŦÓba[XJCĨŇÙd#55qsľm
  38.  <=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şʼn_CÏŧėòcĴÎ6;21nĨÒTtŐý
  39. ը૾Ϧιʔεͷૢ࡞ؔ܎ #6#!/#)' AĪĵ^łÊ™‹Ir“±Ž!cûƂw‡ ±” .7)+056;.75524+6' .7)+056;.75.'/10#&' A24+6'w‡ ±”Ttž©„|¯JDt 

  40. ઌਓ͕໨ࢦ͢ͱ͜ΖΛ ৼΓฦΔ £ŽũŰ_žªž­Œ‘‡ 

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

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

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

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

  45. Shootout? 

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

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

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

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

  50.  4UZMVT͕໨ࢦ͢ $44ϓϦϓϩηοα žªž­Œ‘‡JďGtåƉcŤŅR

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

  52.  4UZMVT$44Β͍͠ߴػೳݴޠ 6*'/156.+-'*+)*.'8'.56;.'5*''6.#0)7#)' ĞnbŹRE;06#:wÉG]Et ':6'0&nÖąĩėnDt ž©„|¯īĩbqtđÿĊnDt

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

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

  55. 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
  56. x ߴػೳʹ༝དྷͨ͠ෳࡶ͞ žªž­Œ‘‡cèĠīřbqtİĦ îĂaīřbķu°ēsçQut ŢƆĊ_EFĘREåƉwĒZŸxY  %2/:966>=398-+></.,B=2/:;/:;9-/<<9;

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

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

  59.  Ÿ¯±ž¬œ{‘ƒ‹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 żĜ^ŚĹ
  60.  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?
  61.  žªž­Œ‘‡^ øIbĐŲÜTt¬|¦± żſń/+:+0wŽR] đÿRXž­™’{wĔÅ i /+:+056;. wĢģńb ƅ¸R]ĝM¬|¦± ŢƆQbĮwßruU

    rRM‹Ž|«öŕbùĉ l 56;.'56;.
  62.  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
  63.  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
  64.  ࠞࡏͨ͠໰୊ͷ ϨΠϠʔΛ෼͚ͯΫϦΞʹ rioK@TII?fqN!!VhEU

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

  66. ·ͱΊ OcÍcžªž­Œ‘‡_ƀgę 

  67. ݡ͍ϓϦϓϩηοαબͼΛ ėIJ *';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
  68. 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çü 
  69. 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- 

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

  71. 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)