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官网上下载Ruby安装文件（随意选择一个版本），此处选择的是最新版本Ruby1.9.3-p385：
你可能已经听说过CSS预处理器，但现在还没有有效鼓起勇气尝试的，因为学习时间？或者是因为“预处理器”听上去很可怕？
天津网站建设带领大家把那些在易用性和不确定性的预处理器问题谈谈。
我们都使用预处理器编译我们写的CSS代码中处理语言的纯CSS的语法。如果你较近考虑使用CSS预处理器，有没有更好的时间来学习所有选项和有用的工具。较近有很多的阻力来自开发商，他们认为，预处理器的指导太远，从纯CSS的复杂性增加了更多的层。但是较近，许多人已经意识到可以使我们的CSS有多么强大的处理器。
为什么我们应该使用CSS预处理器
有各种原因，CSS处理器可以在我们的发展过程中是一个有价值的工具。首先，他们不破坏浏览器的兼容性，另一个优点是预处理器，使我们的CSS DRY（不要重复自己），使我们能够创建可重复使用的CSS属性，这使得我们的代码更加模块化和可扩展。
预处理器节省我们的时间，并为我们做了很多繁琐的东西，因为他们有整齐的功能，我们希望普通的CSS，像嵌套选择器，数学函数，引用选择，甚至报告错误，告诉我们在哪里，以及为什么在我们的代码中的错误。
嵌套选择器的预处理器的例子：
header {
margin-bottom: 2低px;
nav {
height: 3低px;
a {
color: white;
}
}
}
编译:
header {
margin-bottom: 2低px;
}
header nav {
height: 3低px;
}
header nav a {
color: white;
}
LESS
用JavaScript编写的，LESS扩展了CSS的动态行为，如变量，混入，操作和功能。文件似乎看起来更接近纯CSS，所以它是一个平滑的过渡到一个预处理。之类的框架引导程序使用较少利用的动态特性。也少了允许类，混入在样式表中的任何地方，我们写的是可重复使用的。
.border-radius {
border-radius: 1低px;
-moz-border-radius: 1低px;
-webkit-border-radius: 1低px;
}
我们的样式表中，我们可以调用类的任何地方:
header {
.border-radius;
}
Sass
用Ruby编写的，Sass也扩展了CSS通过添加嵌套规则，变量，混入，功能更。使用Sass的较好的部分之一是，我们可以使用它与指南针，功能和附加Sass的顶部，它简化了我们的进程建立在一个框架，创建动态图像的精灵，写干净的代码，并具有产量大，CSS3功能。
Sass语法范例：
.headline
color: blue
font-size: 2em
Stylus
也写在JavaScript（node.js的），手写笔配备Sass和LESS提供的功能有许多，它支持一个缩进的语法和常规的CSS样式。
示例语法：
h1
font 2em Helvetica, Arial, sans-serif
结论
预处理器可能是值得融入您的工作流程，选择一个适合您的工作流程 - 思维 - 较好的，而不是因为它是较受关注的。
希望现在你感觉更有信心使用CSS预处理器。如果有疑问，你可以随时退回到纯CSS在你的预处理文件。请记住，你不是在学习一种全新的语言 - 只是一个新的语法。
推荐阅读：
1.天津网站推广运营必备的几个职位 http://www.wzjs888.com/news/skill/678.html
2.那些在百度有高排名的网站是具有那些特点 http://www.wzjs888.com/news/share/679.html
3.天津网站建设公司哪家好，天津做网站哪家专业 http://www.wzjs888.com/news/knowledge/676.html
4.天津制作一个网站费用 http://www.wzjs888.com/news/question/675.html
以上内容由匠人匠心科技（http://www.wzjs888.com）为您提供，转载请注明出处，更多有关天津网站建设，网站改版，网站优化、微信网站制作(微官网)、手机app开发、网站代运营等互联网应用服务都可以联系我们。热线：138-2142-0129或致电136-2215-0903张经理。
匠人匠心科技每天都会不定时更新有关天津网站制作以及网络营销推广的文章，希望对您有用。
