Coffeescript的使用简要

安装nodejs coffeescript

http://www.nodejs.org/ 下载 node-v0.8.6-x86.msi

安装后PATH环境变量会增加[如下是我的windows 7 64系统的情况]

C:\Users\Administrator\AppData\Roaming\npm\

C:\Program Files (x86)\nodejs\

coffeescript安装

进入nodejs :

C:\Windows\SysWOW64\cmd.exe /k "C:\Program Files (x86)\nodejs\nodejsvars.bat"

https://github.com/jashkenas/coffee-script/tags 下载:jashkenas-coffee-script-1.3.3-0-g79492aa.tar.gz

npm install -g jashkenas-coffee-script-1.3.3-0-g79492aa.tar.gz

在 C:\Users\Administrator\AppData\Roaming\npm 下会安装coffeescipt模块

命令行下输入:

coffee -v 可以查看是否输入正常

编辑器IDE

http://visualstudiogallery.msdn.microsoft.com/site/search?query=coffeescript&f%5B0%5D.Value=coffeescript&f%5B0%5D.Type=SearchText&ac=8 可以搜索到如下的包安装

CoffeeScriptRunnerVSPackage.vsix

CoffeeLite-0.1.4.vsix

WebEssentials.vsix

JsBuildTools.vsix

语法高亮运行等支持如下

wps_clip_image-1854

编译

wps_clip_image-21368

精简、压缩Javascript代码

wps_clip_image-32494

CSS精简

wps_clip_image-24267

Site.less.css

这个工具也支持在VS下用Mindscape.WebWorkbench.Integration.10.vsix

The Mindscape Web Workbench is a free plugin for Visual Studio 2010 + Visual Studio 2012 to provideCoffeeScript, Iced CoffeeScript, Sass and Less editing! It includes all the essentials for making modern web development pain free in Visual Studio. 

http://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a

Mindscape 使用说明【包括图】

http://www.hanselman.com/blog/CoffeeScriptSassAndLESSSupportForVisualStudioAndASPNETWithTheMindscapeWebWorkbench.aspx 

 

CSS的几个资料

http://www.lesscss.net 

 CSS 最痛苦的是要搞定一堆浏览器兼容bug ,其次就是要面对CSS 不是programming language 这现实,不存在其他程式语言常见的变数、运算、继承等概念,使原本简单的工作变得冗长,并且使维护工作变得麻烦。

less 的出现便是为了解决这个问题:在现有CSS syntax 的基础上,为CSS 加入程式语言的特性,包括变数、scope、nested rules、运算、继承。

 

SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。

posted @ 2012-08-16 16:58  2012  阅读(1926)  评论(0编辑  收藏  举报