éå»æ°ã¶æéãç§ãã¡ã¯éãã«æ°ãããããžã§ã¯ãã«åãçµãã§ããŸããã ä»æ¥ãç§ã¯ããŒãã»ãµã¹ãå šäžçã«çºè¡šããæºåãã§ããŠããŸãã ããã¯ãã€ã³ã¹ããŒã«ãšéçºãè¿ éãã€ç°¡åã«ãªãããã«èšèšãããããŸã£ããæ°ããSasså®è£ ã§ãã ãŸã å®æããŠããŸãã-ç§ã¯ãããSassä»æ§ã«åãããããšåãçµãã§ããŸã-ã ããä»æ¥ã¯ããŒãžã§ã³1.0.0-alpha.1ãå ¬éããŠããŸãã ããããããŠã³ããŒãããŠãããã䜿ã£ãŠã ãã°ã®å ±åãéå§ã§ããã»ã©ä¿¡é Œæ§ããããŸãã
ãªãªãŒã¹ããŒãžããã¢ãŒã«ã€ããããŠã³ããŒãã§ããŸã-åã«è§£åãããã£ã¬ã¯ããªããã¹ã«è¿œå ãã dart-sass
ãå®è¡ããŸãã DartãJavaScriptã§ã³ã³ãã€ã«ãããŠããããã npmãã€ã³ã¹ããŒã«ãããŠããå Žåã¯ã npm install -g dart-sass
å®è¡ããŠJSããŒãžã§ã³ãã€ã³ã¹ããŒã«ã§ããŸãã ããªãèªèº«ããã§ã«DartãŠãŒã¶ãŒã§ããå Žåã¯ã pub global dart-sass
ããã€ã³ã¹ããŒã«ã§ããŸãã
Sassãæžãæããçç±
éå»æ°å¹Žã«ããã£ãŠãSassã®2ã€ã®äž»èŠãªå®è£ ããããŸããã Ruby Sassã¯ãäž»ã«Chrisã®å€å€§ãªãµããŒããåããŠç§ãæžããæåã®ãã®ã§ãã é«ã¬ãã«ã§ç°¡åã«éçºã§ããæ°ããæ©èœãå°å ¥ããŠãªãªãŒã¹ããå Žæã§ããã ãããããããšããšã¢ãŒãã³ãšãã³ããã³ã«ãã£ãŠäœæãããçŸåšã¯ãã«ã»ã«ãšãã€ã±ã«ã«ãã£ãŠãµããŒããããŠããC ++å®è£ ã§ããLibSassãç»å ŽããŸããã ããã¯äœã¬ãã«ã®ããŒãžã§ã³ã§ãããä»ã®èšèªã«ãã°ããç°¡åã«ã€ã³ã¹ããŒã«ããŠåã蟌ãããšãã§ããŸãã ç¹ã«ã Node.jsãžã®ãã€ã³ãã¯ãJavaScriptã®äžçã§Sassã䜿çšããéåžžã«äžè¬çãªæ¹æ³ã§ãã
åããŒãžã§ã³ã®ã¡ãªããã¯ãä»ã®ããŒãžã§ã³ã®åŒ±ç¹ãè£å®ããŸãã LibSassãé«éã§ç§»æ€æ§ãããå ŽåãRuby Sassã¯é ããRuby以å€ã®ãŠãŒã¶ãŒãã€ã³ã¹ããŒã«ããã®ã¯å°é£ã§ãã ããããRuby Sassã¯éçºã容æã§ãããLibSassã§ã¯äœã¬ãã«èšèªã®ããã«æ°ããæ©èœãè¿œå ããããšã¯ã¯ããã«å°é£ã§ãã è£å®çãªé¢ä¿ã¯å¥å šã§ããå¯èœæ§ããããŸãããããã¯ãã©ã®ãœãªã¥ãŒã·ã§ã³ãæ¬æ¥ããã¹ãã»ã©è¯ããã®ã§ã¯ãªãããšãæå³ããŸãã 5æã«MarcelãLibSassããŒã ãæ£åŒã«èŸä»»ãããšãããããèŠã€ããŸããã ïŒ èè ã®ã¡ã¢ïŒç§ã¯ãå ¬åŒã«ããšèšããŸãããªããªã圌ã¯å¯èœãªéããããžã§ã¯ãã«åå ããŠããããã§ãããããã圌ãå ¬åŒã®éçºè ã§ããéãã§ã¯ãããŸããïŒã
2人ã®åªåã奪ãããŠãLibSassãããŒã¹ãç¶æã§ãããã©ãã確信ãæãŠãªãã£ãã®ã§ãã¯ãªã¹ãšç§ã¯äœ¿çšããèšèªãå€æŽãããã£ãã®ã§ãã é·ãéã倧ããªã¹ã¿ã€ã«ã·ãŒããåŠçããå ŽåãRuby Sassã®æ¹ãã¯ããã«é ãããšãæããã§ããã CSS ããã°ããçæããæ°ããæ©èœããã°ããè¿œå ã§ããæ°ããå®è£ ãå¿ èŠã§ããã
ãªãããŒãïŒ
èããããããã€ãã®èšèªã調ã¹ãããã€ãã®çç±ã§Dartã«æ±ºããŸããã ãŸããããã¯éåžžã«é«éã§ã -Dart-VMã¯åºæ¬çã«JavaScript VMãããã¯ããã«é«éã§ããã äºåã®ãã³ãããŒã¯ã§ã¯ã倧ããªDart Sassãã¡ã€ã«ã®å ŽåãRuby Sassã®5-10åãLibSassã®1.5åããé ãããšã瀺ãããŠããŸãã ïŒ èè 泚ïŒç§ã¯ãã³ãããŒã¯ã®å°é家ã§ã¯ãªãããã¹ãã¯éžæãããŸããïŒã¢ãããã¯- ãã©ã³ã¹ ïŒã代衚çã§ã¯ãªããœãŒã¹ãã¡ã€ã«ãç§åŠçãªæž¬å®ã«èå³ãããæ¹ã¯ãç¥ãããã ããïŒã å°çšã®JSå®è£ ãã1.5ã2åé«éã«ãªããšæ éã«æ³å®ããŠããŸããã確å®ã«ã¯èšããŸããã ããã«ãDartã®ããã©ãŒãã³ã¹ã¯æéãšãšãã«åäžããŸãã
Dartã¯ç°¡åã«æäœã§ããŸããããã®ãããªå€§èŠæš¡ãªãããžã§ã¯ãã§ã¯ãC ++ãããã¯ããã«ç°¡åã§ãRubyãããããç°¡åã§ãã ãã¡ãããJavaScriptã®ããã«ããã«ç²ŸéããŠãã人ã¯å€ããããŸããããèšèªã®å®è£ ã«é¢ããäœæ¥ã¯ããããã«ããŠãå€éšã®åå è ãå€ãããšãæå³ãããã®ã§ã¯ãããŸããã ç§ã¯æ°ããå®è£ ã§ã»ãšãã©ã®äœæ¥ãè¡ããŸãããDartã¯çŸæç¹ã§å人çã«å®å¿ã§ããèšèªã§ãïŒSassã«åãçµãã§ããªããšãã¯ãDartããŒã ã«æå±ããŠããŸãïŒã Dartã䜿çšãããšãé床ãåäžããŸãã
RubyãJavaScriptãšã¯ç°ãªããDartã¯éçã«åä»ãããããããã³ãŒãèªäœãå®è¡ããããšãªãåå€ã®åãæšæž¬ã§ããŸãã ãŸããC ++ãšã¯ç°ãªããã¬ããŒãžã³ã¬ã¯ã·ã§ã³ã䜿çšããŸã ãã€ãŸããèªåã§æŽçæŽé ããããšãå¿é ããå¿ èŠã¯ãããŸããã ããã«ãããäœæãç·šéãããã³ä¿å®ãç°¡åã«ãªããŸãã ããããããã«éèŠãªããšã¯ãä»ã®ããã°ã©ãã³ã°èšèªã«ç°¡åã«ç¿»èš³ã§ãããããLibSassãæ°ããæ©èœãããé«éã«ååŸã§ããããã«ãªãããšã§ãã
DartãéžæããæåŸã®çç±ã¯ãå°æ°ã®èšèªãèªããã®ãã€ãŸãJavaScriptã®äºææ§ã§ãã Dartã¯JavaScriptã«ã³ã³ãã€ã«ã§ããNode.jsã§çŽæ¥äœ¿çšããããšãããã©ãŠã¶ã§äœ¿çšããããšãã§ããŸãã Sassãšã³ã·ã¹ãã ã®å€§éšåã¯node-sassã§æ§ç¯ãããŠãããæ¢åã®ãã«ãããŒã«ãšã·ã¹ãã ãæ°ããããŒãžã§ã³ã«ç°¡åã«ç§»è¡ã§ããããã«ãJSããŒãžã§ã³ã®Dart Sassãå¯èœãªéãnode-sassãšAPIäºæã«ããäºå®ã§ãã
ããã§ã®å¯äžã®æ¬ ç¹ã¯é床ã®äœäžã§ããV8ã§ã®å®è¡æã®Dart Sassã®é床ã¯ãDart VMã®çŽ2åã§ãã ãã ããRuby Sassã«æ¯ã¹ãŠ3ã4åã®å®å®ããå¢å ãèŠãããŸãã æçµçã«ã¯ãJSããŒãžã§ã³ã®ãŠãŒã¶ãŒã«ã§ããã ãç°¡åã«Dart VMãžã®ç§»è¡ãã¹ãæäŸã§ããããšãé¡ã£ãŠããŸãã
ä»ã®å®è£ ã¯ã©ããªããŸããïŒ
LibSassã®éçºã«å€æŽã¯ãããŸããã ãã€ã±ã«ã¯ã Sass 3.5ããæ°ããæ©èœãè¿œå ããããã«äžçæžåœã«åãçµãã§ãããæ°ããæ©èœãè¿œå ãããŠããã®ããã»ã¹ãç¶ç¶ããããšãæåŸ ããŠããŸãã å¯äžã®éãã¯ãLibSassã劥åœãªããã©ãŒãã³ã¹ãæã€å¯äžã®ããŒãžã§ã³ã§ã¯ãªããªãããããã®ããŒãžã§ã³èªäœãèµ·åããåã«ãLibSassãææ°ããŒãžã§ã³ã®èšèªãšå³å¯ã«äºææ§ãæã€å¿ èŠããªããªãããšã§ãã
æè»æ§ãé«ãŸããšãLibSassã®ãªãªãŒã¹ãéããªãããŠãŒã¶ãŒãæãæãæ©èœã匷調ãããŸãã å³å¯ãªäºææ§ã¯ãããšãã°ã«ã¹ã¿ã CSSããããã£ã®ãµããŒããªã©ã®éèŠãªé©æ°ããRuby Sassã®å¯Ÿå¿ããããŒãžã§ã³ã«å«ãŸããŠãããã¹ãŠã®å°ãããŠããªãããŒãªå¢çã±ãŒã¹ãããšãã° :root
ãåŠçããããŸã§ãªãªãŒã¹ã§ããªãããšãæå³ããŸãã :root
å¯èœãªéãæ倧éã®äºææ§ãå®çŸããããšããŠããŸãããé床ã劚ããããšã¯ã§ããŸããã
圌ã®æ°ããéçºè ãæ¥ãªãéããRuby Sassã¯æçµçã«å®å šã«çµäºããŸãã ãšã³ã·ã¹ãã ãç Žå£ãããªã¹ã¯ãããããã移è¡ãçªç¶è¡ããããããŸãããã¯ãªã¹ãšç§ã¯1幎éãµããŒãããŸããããã«ã¯ãDart Sassã«è¿œå ãããã®ãšåãã¬ãã«ã®æ©èœã®ãµããŒããå«ãŸããŸãã ãã®æéãéããŠéçºè ãšããŠåå ããããšã«èå³ããã人ã¯ãæ¥å¹Žã®ã³ãŒãã玹ä»ãããŠããã ããŸãã ãããŠèª°ã話ããªãå ŽåãRuby Sassã¯å»æ¢ãããµããŒããããŠããªããã®ãšããŠå ¬åŒã«èªèãããŸãã
ç§ã¯ãRuby Sassã®éçºãç¡æã§åæ¢ãã決å®ãäžããŠããªãããšã匷調ããããšæããŸãã ããã¯ç§ã«ãšã£ãŠå€§ããªå€æŽã§ãããç°¡åãªå€æŽã§ã¯ãããŸãããã»ãŒ10幎éç¶ç¶çã«åãçµãã§ããããã®è©±ãææŸãã®ã¯é£ããã§ãã ããããã¯ãªã¹ãšç§ã¯ããã«ã€ããŠåŸ¹åºçã«è°è«ãããããæ£ããåãã§ãããšä¿¡ããåŸåããããŸããã Sassã«å€ãã®æéãè²»ãããŠããããããã®æéãå®è£ ã«è²»ããããšã¯ãã¯ãæå³ããªããªããããéåžžã«é ããããæ倧ã®ãŠãŒã¶ãŒã«ã¯åãå ¥ããããŸããã
次ã¯äœã§ãã
Dart Sassã®æåã®å®å®ããŒãžã§ã³ããªãªãŒã¹ããåã«ããªã¹ãã«ããã€ãã®çŽ æŽããããã®ããããŸãã
Sassä»æ§ãšã®å®å šãªäºææ§ã ç¹ã«
@extend
ã«é¢ããŠãDart Sassãæ£ããåäœããªãç¬éããŸã ãããŸãã Sassã®ä»æ§ã¯éåžžã«å æ¬çã§ããããã解決ããã®ãé£ããç¹å®ã®éäºææ§ãæåŸ ããŠããŸããããããã£ãŠãããã¯å€±æãããã¹ãã®æ°ããŒãã«æžããã ãã§ãã
node-sassã®
render()
ãšããªãäºææ§ãããrender()
ã ãã®APIã¯ãJavaScriptã®äžçã§ã®LibSassãžã®äž»èŠãªãšã³ããªãã€ã³ãã§ãã ããã«ããããã«ãã·ã¹ãã ãSassãèµ·åãããŠãŒã¶ãŒãç¬èªã®Sassæ©èœãå®çŸ©ãã Eyeglassãã¢ãžã¥ãŒã«ãSassã«æž¡ããŸãã æ¢åã®ãšã³ã·ã¹ãã ãDart Sassãšé£æºããç¯å²ã§APIããµããŒãããããšèããŠããŸãã
- äºææ§ã®ããDartãšRuby Sassã Dartæ©èœãæå³çã«Rubyãšç°ãªãå Žåãç¹ã«Rubyã®åäœããã°ãšèŠãªãããå Žåãããã€ããããŸãã ããã«é¢ããèŠåãRuby Sassã«è¿œå ããããæå°éã®å€æŽã§ãããè¡ãããšãã§ããå Žåã¯ãRubyã«æ°ããåäœãå°å ¥ããå¿ èŠããããŸãã
ãã©ãŠã¶ãŒã§SassããµããŒãããDart VMã§Sassã«ããŒããšäºææ§ã®ããã©ãããŒãæäŸãããªã©ãæçµçã«äœæããããã€ã³ããããã€ããããŸãããåæãªãªãŒã¹ã¯ãããã¯ãããŸããã
æªæ¥ã®æªæ¥
ä»åŸæ°ãæã«ããã£ãŠãDart Sassã®å®å®æ§ãšäºææ§ãé«ãããšãšãã«ãLibSassã«Sass 3.5ã®æ©èœãè¿œå ããããã«å€ãã®äœæ¥ãè¡ãäºå®ã§ãã 2017幎åé ã«ã¯ãDart Sassã®å®å®ãªãªãŒã¹ãšLibSass 3.5ã®ããŒãžã§ã³ããªãªãŒã¹ãããå¯èœæ§ãé«ããšæããŸãã çŸæç¹ã§ã¯ãäž»èŠãªæ©èœã«é¢ããèŠè§£ã決å®ããSass 4.0ãšãã®å®å šã«æ°ããã¢ãžã¥ãŒã«ã·ã¹ãã ã§ã®äœæ¥ãéå§ããŸãã
Dart Sassã¯å€§ããªå€åã§ã¯ãããŸããããåæã«åºæ¿çã§ãã ããã«ããããŠãŒã¶ãŒã«æ°ããæ©èœãããè¿ éã«æäŸã§ããã ãã§ãªãããã®æ©èœãããé«éã«åäœãããããšãã§ããŸãã ããã«ããŠãŒã¶ãŒã¯ãªãã¡ã¬ã³ã¹å®è£ ãç°¡åã«ã€ã³ã¹ããŒã«ããŠå®è¡ã§ããŸãã ãããŠæåŸã«ãããã«ãããSassãçŽç²ãªJavaScriptã§å®è¡ããçç£çãªæ¹æ³ãåããŠæäŸãããŸãã ã¡ãªããã¯éåžžã«å€§ããå ·äœçã§ãããããã³ã¹ãã«èŠåãã ãã®äŸ¡å€ããããšç¢ºä¿¡ããŠããŸãã