详说css与预处理器（以及less、sass、stylus的区别）
CSS(Cascading Style Sheet)被译为级联样式表，做为⼀名前端从业⼈员来说，这个专业名词并不陌⽣，在⾏业中通常称之为“风格样式表（Style Sheet）”，它主要是⽤来进⾏⽹页风格设计的。通过设⽴样式表，可以统⼀地控制HTML（XHTML）中各标签的显⽰属性。可以使⼈更能有效的控制Web页⾯（或Web应⽤程序）外观，可以精确指定Web元素位置，外观以及创建特殊效果的能⼒。CSS拥有对⽹页对象和模型样式编辑能⼒，并能够进⾏初步交互设计，是⽬前基于⽂本展⽰最优秀的表现设计语⾔。CSS能够根据不同使⽤者的理解能⼒，简化或者优化写法，针对各类⼈有较强的易读性。
就CSS本⾝⽽⾔，对于⼤多数Web前端从业⼈员来说就不是问题。学过CSS的⼈都知道，它不是⼀种编程语⾔。你可以⽤它开发⽹页样式，但是没法⽤它编程。换句话说，CSS 基本上是设计师的⼯具，不是程序员的⼯具。在程序员的眼⾥，CSS是很头痛的事情，它并不像其它程序语⾔，⽐如说PHP、Javascript等等，有⾃⼰的变量、常量、条件语句以及⼀些编程语法，只是⼀⾏⾏单纯的属性描述，写起来相当的费事，⽽且代码难易组织和维护。
很⾃然的，有⼈就开始在想，能不能给CSS像其他程序语⾔⼀样，加⼊⼀些编程元素，让CSS能像其他程序语⾔⼀样可以做⼀些预定的处理。这样⼀来，就有了“CSS预处器（CSS Preprocessor）”。
⼀、什么是CSS预处器
CSS预处理器定义了⼀种新的语⾔，其基本思想是，⽤⼀种专门的编程语⾔，为CSS增加了⼀些编程的特性，将CSS作为⽬标⽣成⽂件，然后开发者就只要使⽤这种语⾔进⾏编码⼯作。通俗的说，CSS预处理器⽤⼀种专门的编程语⾔，进⾏Web页⾯样式设计，然后再编译成正常的CSS⽂件，以供项⽬使⽤。CSS预处理器为CSS增加⼀些编程的特性，⽆需考虑浏览器的兼容性问题，例如你可以在CSS中使⽤变量、简单的逻辑程序、函数等等在编程语⾔中的⼀些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS预处理器技术已经⾮常的成熟，⽽且也涌现出了很多种不同的CSS预处理器语⾔，⽐如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近⽹上的⼀⼤热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各⼤技术论坛上，很多⼈为此争论不休。相⽐过计我们对是否应该使⽤CSS预处理器的话题⽽⾔，这已经是很⼤的进步了。
到⽬前为⽌，在众多优秀的CSS预处理器语⾔中就属Sass、LESS和Stylus最优秀，讨论的也多，对⽐的也多。本⽂将分别从他们产⽣的背景、安装、使⽤语法、异同等⼏个对⽐之处向你介绍这三款CSS预处理器语⾔。相信前端开发⼯程师会做出⾃⼰的选择——我要选择哪款CSS预处理器。
⼆、Sass、LESS和Stylus背景介绍
为了能更好的了解这三款流⾏的CSS预处理器，我们先从其背景⼊⼿，简单的了解⼀下各⾃的背景信息。
1.Sass背景介绍
Sass是对CSS（层叠样式表）的语法的⼀种扩充，诞⽣于2007年，最早也是最成熟的⼀款CSS预处理器语⾔，它可以使⽤变量、常量、嵌套、混⼊、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使⽤，也就是说它本⾝的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使⽤动态变量等，所以它更像⼀种极简单的动态语⾔。
其实现在的Sass已经有了两套语法规则：⼀个依旧是⽤缩进作为分隔符来区分代码块的；另⼀套规则和CSS⼀样采⽤了⼤括号（｛｝）作为分隔符。后⼀种语法规则⼜名SCSS，在Sass3之后的版本都⽀持这种语法规则。
2.LESS的背景介绍
2009年开源的⼀个项⽬，受Sass的影响较⼤，但⼜使⽤CSS的语法，让⼤部分开发者和设计师更容易上⼿。LESS提供了多种⽅式能平滑的将写好的代码转化成标准的CSS代码，在很多流⾏的框架和⼯具中已经能经常看到LESS的⾝影了（例如Twitter的Bootstrap框架就使⽤了LESS）。
根据上的介绍，其实LESS是Alexis Sellier受Sass的影响创建的⼀个开源项⽬。当时SASS采⽤了缩进作为分隔符来区分代码块，⽽不是CSS中⼴为使⽤的⼤括号（｛｝）。为了让CSS现有的⽤户使⽤起来更佳⽅便，Alexis开发了LESS并提供了类似CSS的书写功能。
3.Stylus背景介绍
Stylus，2010年产⽣，来⾃于Node.js社区，主要⽤来给Node项⽬进⾏CSS预处理⽀持，在此社区之内有⼀定⽀持者，在⼴泛的意义上⼈⽓还完全不如Sass和LESS。
Stylus被称为是⼀种⾰命性的新语⾔，提供⼀个⾼效、动态、和使⽤表达⽅式来⽣成CSS，以供浏览器使⽤。Stylus同时⽀持缩进和CSS常规样式书写规则。
三、Sass、LESS和Stylus的安装
简单了解以后，您是否有点蠢蠢欲动，想动⼿⼀试，看看哪种预处理器适合⾃⼰的编码习惯，或者说更适合⾃⼰的团队成员以及项⽬的开发。要试，肯定有必要了解⼀下三者各⾃的安装⽅法。在这⼀节中，主要为⼤家介绍三者的安装⽅法，以供⼤家对⽐。
1.Sass的安装
Sass是Ruby语⾔写的，但是两者的语法没有关系。不懂Ruby，照样可以正常使⽤Sass。只是必须先安装Ruby，然后再安装Sass。
⾸先安装Ruby，如果你使⽤的是IOS系统，那么你的系统已经安装好了Ruby。如果你使⽤的是微软的Windows系统，那么安装就有些许的⿇烦。不过也不⽤过于担⼼，按照下⾯的步骤就能帮你快速的安装好。
到RubyInstaller官⽹上（随意选择⼀个版本），此处选择的是最新版本Ruby1.9.3-p385：
Ruby安装⽂件下载好后，可以按应⽤软件安装步骤进⾏安装Ruby。在安装过程中，个⼈建议将其安装在C盘下，在安装过程中选择第⼆个选项，如下图所⽰：
Ruby安装完成后，在开始菜单中到新安装的Ruby，并启动Ruby的Command控制⾯板，如下图所⽰：
在启动的Ruby命令控制⾯板中输⼊下⾯的命令：
gem install sass
输⼊上⾯命令，回车后就会⾃动安装Sass：
这样Sass就安装成功了，也就可以使⽤了。
2.LESS的安装
LESS的安装和Sass安装有所不同，他不需要依赖于Ruby环境，就能直接安装使⽤。不过LESS安装分为两种：客户端和服务器端安装。
a)客户端安装：
我们可以直接在客户端使⽤“.less”（LESS源⽂件），只需要在载⼀个Javascript脚本⽂件主“less.js”，然后在我们需要引⼊LESS源⽂件的HTML的<head>中加⼊如下代码：
<link rel="stylesheet/less"type="text/css"href="⽂件路径/styles.less">
<script src="⽂件路径/less.js"type="text/javascript"></script>
需要注意的是：在引⼊“.less”⽂件中，“link”的“rel”属性要设置为“stylesheet/less”。还有更重要的⼀点需要注意的是：LESS源⽂件⼀定要在“less.js”引⼊之前引⼊，这样才能保证LESS源⽂件正确编译解析。
b)服务器端安装
LESS在服务器端的使⽤主要是借助于LESS的编译器，将LESS源⽂件编译⽣成最终的CSS⽂件，⽬前常⽤的⽅式是利⽤node的包管理器（npm）安装LESS，安装成功后就可以在Node环境中对LESS⽂件进⾏编译。如此⼀来，LESS在服务器的安装和Sass的安装有点相似，不同之处是他们需依赖的环境不⼀样，LESS需要的是Node JS环境，⽽Sass需要的是Ruby环境，为了让⼤家能更清晰的知道如何在服务器端安装LESS，此处简单的过⼀下安装过程（本⽂演⽰的是在Window7下的安装⽅法）。
⾸先到Node Js的⼀个适合Windows系统的安装⽂件，此处下载的是“node-v0.8.20-x86.msi”：
安装⽂件下载后，按正常应⽤程序⽅法⼀样安装。安装完成后在开始菜单中启⽤Node js的Command控制⾯板：
在启动的Node Js的Command控制⾯板直接输⼊下⾯的命令：
$ npm install less
这样就安装完LESS的编译命令，可以在本地正常编译LESS源⽂件。如果您想下载最新稳定版本的LE
SS，还可以尝试在Node JS的Command控制⾯板输⼊：
$ npm install less@latest
3.Stylus的安装
Stylus的安装和LESS在服务器端的安装很相似，同样依赖于Node JS的环境，也就是说也要先安装Node Js（如果安装Node JS请参考前⾯的介绍）。唯⼀不同的是在Node JS 的Command控制⾯板输⼊的命令不⼀样：
$ npm install stylus
然后，就会⾃动下载安装最新的stylus库：
这样就算是安装完Stylus了，也可以正常使⽤Stylus。
四、Sass、LESS和Stylus转译成CSS
Sass、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”⽬录下。
启动Ruby的Command控制⾯板，到需要转译的Sass⽂件，如此例此⽂件放置在D盘的“www/workspace/Sass/css”⽬录下：
如果仅针对于单⽂件的转译，需要将“style.scss”转译成“style.css”，只需要在对应的⽬录下输⼊下⾯的命令：
$ sass style.scss style.css
这样原本在D盘的“www/workspace/Sass/css”⽬录下只有“style.scss”这个⽂件，现在增加了⼀个“style.css”⽂件，⽽这个CSS⽂件我们就可以⽤来调⽤，他也就是“style.scss”转译出来的样式⽂件。
当然，我们不可能每保存⼀次这个Sass⽂件就来执⾏⼀回这个转译命令。那么有没有更好的办法实现呢？回答是肯定的，可以通过下⾯的监听命令实现，这样⼀来只要Sass⽂件做了修改，就会⾃动更新对应的CSS样式⽂件。
单⽂件的监听，只需要在刚才的命令控制⾯板中输⼊：
$ sass --watch style.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 --watch sassFileDirectory:cssFileDirectory
在本例中，冒号前⾯的“sassFileDirectory”是指“/css/sass”下的“sass”⽬录，冒号后⾯的“cssFileDirectory”是指“css”⽬录，对应的命令就是：
$ sass --watch css/sass:css
回车后，同样可以得到提⽰信息：
除了使⽤Ruby的Command控制⾯板转译Sass之外还可以考虑第三⽅⼯具，⽐如说有名的Compass.app和fire.app。
2.LESS⽂件的转译成CSS⽂件
LESS⽂件的转译和Sass⽂件转译可以说是⼤同⼩异，不同之处是LESS在安装的Node JS环境下通过其⾃⼰的命令来进⾏转译。
$ lessc style.less
上⾯的命令会将编译的CSS传递给stdout，你可以将它保存到⼀个⽂件中：
$ lessc style.less > style.css
除了上⾯的命令转译LESS源⽂件之外，现在还有很多第三⽅开发的⼯具，⽐较常见的有：SimpleLess、Less.app、LESS编译辅助脚本-LESS2CSS、WinLess和CodeKit.app 等，我个⼈现在常⽤的是WinLess⼯具，简单易⽤，不过在IOS系统下LESS.app和CodeKit.app很好⽤。
3.Stylus源⽂件转译成CSS⽂件
Stylus具有可执⾏性，因此Stylus能将⾃⾝转换成CSS。Stylus可以读取⾃“stdin”输出到“stdout”，因此Stylus可以像下⾯转译源⽂件：
$ stylus –compress  <some.styl> some.css
Stylus也像Sass⼀样，同时接受单个⽂件和整个⽬录的转译。例如，⼀个⽬录名为“css”将在同⼀个⽬录编译并输出“.css”⽂件。
$ stylus css
下⾯的命令将输出到“./public/stylesheets”：
$ stylus css –out public/stylesheets
还可以同时转译多个⽂件：
$ stylus one.styl two.stylcss最新
如果你的浏览器安装了Firebug，那么可以使⽤。
$ stylus –firebug  <path>
五、Sass、LESS和Stylus的语法
每⼀种语⾔都有⾃⼰⼀定的语法规则，CSS预处理器语⾔也不例外，在真正使⽤CSS预处器语⾔之前还有⼀个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预处理器语⾔的语法和CSS语法都差不多。
1.Sass语法
Sass3.0版本开始使⽤的是标准的CSS语法，和SCSS可以说是⼀样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使⽤“.scss”扩展名。Sass语法规则可以像CSS那样书写：
/*style.sass新版语法规则*/
h1{
color:#936;
background-color:#333;
}
正如你所看到的，在Sass样式中，这样的代码是在简单不过的了。
重要的⼀点是，Sass也同时⽀持⽼的语法，⽼的语法和常规的CSS语法略有不同，他需要严格的语法，任何的缩进和字符的错误都会造成样式的编译错误。Sass可以省略⼤括号（｛｝）和分号（；），完全依靠严格的缩进和格式化代码，⽽且⽂件使⽤“.sass”扩展名，他的语法类似于：
/*style.sass*/
h1
color:#936
background-color: #333
2.LESS语法
LESS是CSS的⼀种扩展形式，它并没有阉割CSS的功能，⽽是在现有的CSS语法上，添加了很多额外的功能。就语法规则⽽⾔，LESS和Sass⼀样，都是使⽤CSS的标准语法，只是LESS的源⽂件的扩展名是“.less”，其基本语法类似于：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。