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

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

Ayumu Sato
January 12, 2013

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

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

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

Ayumu Sato

January 12, 2013
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

  1. 

  2. -&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 
  3. -&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 
  4.  ?/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
  5.  ,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'&
  6.  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
  7.  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Šõ
  8.  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
  9.  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
  10.  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
  11.  <+<<<+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
  12.  <=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Őý
  13.  Ÿ¯±ž¬œ{‘ƒ‹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 żĜ^ŚĹ
  14.  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?
  15.  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
  16.  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
  17. 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)