Coffeescript的使用简要

简介: 安装nodejs coffeescript http://www.nodejs.org/ 下载 node-v0.8.6-x86.msi 安装后PATH环境变量会增加[如下是我的windows 7 64系统的情况] C:\Users\Administrator\AppData\Roaming\n...

安装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。

相关文章
|
4月前
|
C语言
C 语言函数:入门指南
一个函数包括两个部分: 声明:函数名称、返回类型和参数(如果有) 定义:函数体(要执行的代码)
92 2
|
7月前
|
前端开发 关系型数据库 开发工具
构建自己的MVC框架(Ruby语言实现)-- 开篇
构建自己的MVC框架(Ruby语言实现)-- 开篇
|
7月前
|
前端开发 关系型数据库 开发工具
构建自己的MVC框架(Ruby语言实现)-- 第一章 从零到“它工作了!”
构建自己的MVC框架(Ruby语言实现)-- 第一章 从零到“它工作了!”
|
9月前
|
Java 编译器 程序员
“C++基础入门指南:了解语言特性和基本语法”(上)
“C++基础入门指南:了解语言特性和基本语法”(上)
39 0
|
9月前
|
存储 编译器 C++
“C++基础入门指南:了解语言特性和基本语法”(中)
“C++基础入门指南:了解语言特性和基本语法”(中)
59 0
|
9月前
|
存储 安全 编译器
“C++基础入门指南:了解语言特性和基本语法”(下)
“C++基础入门指南:了解语言特性和基本语法”(下)
61 0
|
9月前
|
JavaScript 前端开发 Dart
《现代Typescript高级教程》序言
序言 自己学习过程中总结的的Typescript高级教程,适合有一定Typescipt基础的同学学习 在线阅读 解析TypeScript最新特性,包括装饰器、泛型、高级类型以及元数据反射等实战指南。 结合最新的语法特性和生动的代码示例,本教程将引领你跃过TypeScript的高级阶段,更深入理解和应用静态类型语言的优势。
72 0
|
JavaScript
js基础笔记学习103-面向对象简介2
js基础笔记学习103-面向对象简介2
57 0
js基础笔记学习103-面向对象简介2
模块化简介 | Python从入门到精通:高阶篇之三十七
本节我们介绍了模块化的优点,以及创建模块的两种方式。直接import 模块名或者import 模块名 as 模块别名。
模块化简介 | Python从入门到精通:高阶篇之三十七
|
Web App开发 JavaScript 前端开发
JavaScript 编程精解 中文第三版 十四、文档对象模型
十四、文档对象模型 原文:The Document Object Model 译者:飞龙 协议:CC BY-NC-SA 4.
1445 0