一、Sass、LESS、Stylus的安装1、Sass的安装Sass是用Ruby语言编写的，但两者的语法没有任何关系。如果你不会Ruby，你仍然可以正常使用Sass。只需先安装Ruby，然后安装Sass。首先安装Ruby，如果你使用的是IOS系统，那么你的系统已经安装了Ruby。如果你使用的是MicrosoftWindows系统，那么安装就有点麻烦了。不过不用太担心，按照下面的步骤来帮助你快速安装。到RubyInstaller官网下载Ruby安装文件（版本随意选择），这里选择最新版本Ruby1.9.3-p385：Ruby安装文件下载完成后，根据应用软件安装安装Ruby即可脚步。安装过程中，个人建议安装在C盘下，安装过程中选择第二个选项，如下图：Ruby安装完成后，在开始菜单中找到刚刚安装的Ruby，并启动Ruby命令控制面板，如下图所示：在启动的Ruby命令控制面板中输入如下命令：geminstallsass输入以上命令，回车后会自动安装Sass：这样Sass就完成了安装成功，可以使用了。2.LESS的安装LESS的安装与Sass的安装不同。无需依赖Ruby环境，直接安装即可使用。但是，有两种类型的LESS安装：客户端和服务器端安装。a)客户端安装：我们可以直接在客户端使用“.less”（LESS源文件），只需在官网加载一个Javascript脚本文件“less.js”，然后我们需要导入LESS源的HTMLfile在中添加如下代码：需要注意的是，导入“.less”文件时，“link”的“rel”属性要设置为“stylesheet/less”。还有一个更需要注意的是，在引入“less.js”之前必须导入LESS源文件，这样才能保证LESS源文件被正确编译解析。b)在服务器端安装LESS。LESS在服务端的使用主要是使用LESS编译器编译LESS源文件生成最终的CSS文件。目前常见的方式是使用节点包管理器（npm）来安装LESS。安装成功后就可以在Node环境下编译LESS文件了。这样在服务器上安装LESS有点类似于安装Sass。区别在于它们依赖于不同的环境。LESS需要NodeJS环境，而Sass需要Ruby环境。为了更清楚如果你知道如何在服务器端安装LESS，这里简单介绍一下安装过程（本文演示的是Window7下的安装方法）。首先去NodeJs官网下载一个适合Windows系统的安装文件。这里下载的是“node-v0.8.20-x86.msi”：安装文件下载完成后，和普通应用程序一样安装。安装完成后，在开始菜单中开启Nodejs的Command控制面板：在启动的NodeJs的Command控制面板中直接输入如下命令：npminstallless这样就安装好了LESS编译命令，并且LESS源文件可以在本地编译。如果你想下载最新稳定版的LESS，也可以尝试在NodeJS的命令控制面板中输入：npminstallless@latest3。Stylus的安装Stylus的安装和服务器端LESS的安装很相似，同样依赖于NodeJS环境，也就是说必须先安装NodeJs（如果安装NodeJS，请参考前面的介绍）。唯一不同的是在NodeJS的Command控制面板中输入的命令不同：npminstallstylus然后会自动下载并安装最新的stylus库：这样即使安装了Stylus也可以正常使用Stylus。2、Sass、LESS、Stylus翻译成CSSSass、LESS、Stylus源文件（客户端下运行的LESS源文件除外）不能被浏览器直接识别，所以要正常使用这些源文件，需要翻译其将源文件转换成浏览器可以识别的CSS样式文件。这也是使用CSS预处理器的关键步骤。如果你不知道这一步怎么做，说明写的代码是不能用的。接下来以同样的方式，看看他们三个是如何将自己的源文件翻译成需要的CSS样式文件的。1.将Sass源文件翻译成CSS文件Sass文件是普通的文本文件，但是有两种文件扩展名，一种是“.sass”，一种是“.scss”。我们一般使用“.scss”。至于这两个文件扩展名的区别，“.sass”是Sass语言文件的扩展后缀，而“.scss”是SCSS语言文件的扩展后缀。至于Sass和SCSS的详细区别这里就不介绍了。你可以简单理解为它们都是CSS预处理器语言，功能和特性相同，只是书写规则不同。翻译Sass文件的前提是有要转换的文件，所以先在项目中创建一个Sass文件，本例中命名为“style.scss”，放在对应的项目样式中，比如D驱动器“www/workspace/Sass/css”目录。启动RubyCommand控制面板，找到需要翻译的Sass文件。本例中文件放在D盘的“www/workspace/Sass/css”目录下：如果只是翻译单个文件，需要将“style.scss”添加到“style.css”中。css”，只需要在相应目录下输入如下命令：sassstyle.scssstyle.css这样就只有“style.scss”文件，现在增加了一个“style.css”文件，我们可以使用这个CSS文件来调用，它是从“style.scss”翻译过来的样式文件。当然，我们不可能每次保存这个sass文件都去执行这个翻译命令。那么有没有更好的方法来实现呢？答案是肯定的，可以通过下面的监控命令来实现，这样只要修改了sass文件，就会自动更新对应的css样式文件。监控单个文件只需要在刚才的命令控制面板中输入：sass--watchstyle.scss:style.css按回车键（Enter），会看到如下提示信息：显示的提示信息表示监控成功。这样，只要修改“style.scss”文件，“style.css”文件就会随着更新而改变。对于一个项目来说，不可能只有一个CSS样式文件。如果需要监控的sass文件有多个，需要进行整理。默认情况下，我喜欢把所有的Sass文件放在“/css/sass”目录下，生成的CSS文件直接放在“/css”目录下。现在我们来修改工程文件目录结构，在“/css”目录下创建一个“sass”目录，找到刚刚创建的“style.scss”文件，将其移动到“/css/sass”目录下。此时监听“css/sass”下的所有Sass文件时，可以在命令面板输入如下格式的命令：sass--watchsassFileDirectory:cssFileDirectory本例中冒号前的“sassFileDirectory”指的是"/css/"sass"下的"sass"目录，冒号后的"cssFileDirectory"指的是"css"目录，对应的命令为：sass--watchcss/sass:css回车后即可还会得到提示信息：除了使用Ruby的Command控制面板翻译Sass之外，还可以考虑第三方工具，比如大名鼎鼎的Compass.app和fire.app。2.LESS文件的翻译转成CSS文件LESS文件的翻译和Sass文件的翻译可以说是大同小异，不同的是LESS是在安装好的NodeJS环境下通过自己的命令进行翻译的lesscstyle.less上面的命令会通过编译好的CSS到stdout，你可以将它保存到一个文件中：lesscstyle.less>style.csskoloa等三方开发的工具，koala是一款前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。具体使用请参考官网：http://koala-app.com/3。Stylus源文件被翻译成CSS文件。Stylus是可执行的，因此Stylus可以将其自身转换为CSS。Stylus可以从“stdin”读取并输出到“stdout”，因此Stylus可以像这样翻译源文件：stylus--compresssome.cssStylus也可以像Sass一样接受单个文件和整个目录的翻译。例如，名为“css”的目录将在同一目录下编译并输出“.css”文件。styluscss以下命令会输出到“./public/stylesheets”：styluscss–outpublic/stylesheets你也可以同时翻译多个文件：stylusone.styltwo.styl如果你的浏览器安装了Firebug，你可以使用FireStylus扩展。stylus–firebug觉得本文对你有帮助的话，请顺便点个赞，注意不要迷路~黑芝麻哇，白芝麻发，黑芝麻白芝麻哇！前端哇
