Web前端开发思考CSS篇：CSS预处理器时代 （一）

署名作者：Clarence

联系方式：QQ:1321518080

写在前面：本文不仅仅就Sass说Sass，更希望在行文中跟大家探讨前端开发的思想

是时候去说“改变”

面对Web前端开发三驾马车之一的样式表语言和层叠式样式表(CSS)，你是否受够了她的“娇柔做作”：开发起来没完没了、运行起来担惊受怕、维护起来臃肿不堪。不管你承不承认，在团队研发过程中，CSS的开发和维护已经成了很多项目的苦不堪言的伤痛。首先我得承认，如果在项目初期做好CSS架构，使用不同的手段组织好CSS代码，例如按照职能划分，采用base.css + common.css + app.css的组织方式，CSS的开发还是可以很赞的，但这一切有一个很严酷的前提：开发和维护CSS的工程师必须要有还不错的CSS功底。

让我们回归到CSS本身，CSS基本上是设计师的工具，不是程序员的工具，CSS不是一门编程语言。从一个程序员的角度，我们需要一门能够定义变量，具有可靠语法的样式表编程语言。很幸运，技术的发展给我们带来了便利，一大批CSS预处理程序应运而生了。

CSS预处理器

CSS预处理器是为CSS开发添加了传统的编程属性，无需考虑浏览器的兼容性问题，其基本思想是，用一门专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。如今CSS预处理器技术已经非常的成熟，作为其中的领头羊Sass和LESS已经是深入人心，但作为在CSS预处理器技术探索求知过程中，陨落的落寞者们，我还是想再次提及他们，向它们致敬。

Switch CSS

http://switchcss.sourceforge.net/

CSS Cacheer

http://shauninman.com/archive/2008/05/30/check_out_css_cacheer

CSS Preprocessor

http://pornel.net/css

DT CSS

https://code.google.com/p/dtcss/

CSS PP

http://csspp.org/

CSScaffold

http://www.w3avenue.com/2009/10/13/csscaffold-php-based-css-framework/

...

在为我们可敬的探索者致敬后，我们将隆重地请出处于荣耀之巅的Sass和LESS。

Less CSS <http://lesscss.org/>

Less 中国官网<http://www.lesscss.net/article/home.html>

Sass <http://sass-lang.com/>

对于Less和Sass谁更好点这个问题，我也曾经痴迷过，但当深入学习Less和Sass后，我发现痴迷这一争论的关键在于我对Less和Sass的不了解。CSS预处理程序没有绝对的好与不好，只有是不是最适合您的风格和项目的需求。这里我也推荐一个关于Sass与LESS对比的链接：http://css-tricks.com/sass-vs-less/。大家可以根据自己的情况决定学习哪个。本文章我将选用Sass作为目标对象，一个很大的原因是Sass具有它最值得自豪的资产 - Compass，而LESS目前还不具备此扩展。

按照常规我这里似乎需要说下CSS预处理程序对所有Web开发环境的重要意义，其实这东西很虚但却很实在。它们将：

1. 缩短您的开发时间
2. 为CSS开发应用”不再重复自己”(DRY)的准则
3. 使您的代码更加清晰易读

Sass有哪些值得你了解

打开互联网，随便搜索一下，相信你会被一箩筐一箩筐的教程惊呆，教程如此之多，老衲该如何是好？这里我只想跟大家说两点：

1. 官方文档是王道
2. 实际操作是王道

对于程序员而言，Sass不过是一门轻量级脚本语言，掌握它的语法和基本运用，绝对是手到擒来，这里我不会重复大多数教程的翻译式讲解，我只是想跟大家探讨，从Sass身上我们能读懂到哪些？

Sass在线转换器

在线网站：http://sassmeister.com/
如果目前你只想基本了解Sass的基本语法什么的，你没有必要大费周章地安装Sass运行环境，使用Sass官方网站提供的线转换器，绝对非常的给力。

Sass的output_style

在线文档：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style

如果你写了若干年的CSS，你知不知道，CSS具有哪些编程风格，这些编程风格都有什么优点和缺点？

编程风格

特点

例子

Nested

嵌套缩进的CSS代码

#main {

  color: #fff;

  background-color: #000; }

  #main p {

    width: 10em; }

Expanded

没有缩进的、扩展的CSS代码

#main {

  color: #fff;

  background-color: #000;

}

#main p {

  width: 10em;

}

Compact

简洁格式的CSS代码

#main { color: #fff; background-color: #000; }

#main p { width: 10em; }

Compressed

压缩后的CSS代码

#main {color:#fff;background-color:#000;}#main p {width: 10em;}

看到具体的例子后，我想我也没有必要具体解释每一种编程风格的优缺点了，场景不同，编程风格也会不同，谁用谁知道。这里我想到了一句话“我就在碗里，你来取啊”~

从sass --watch说起

在线文档：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

官网上说“You can also tell Sass to watch the file and update the CSS every time the Sass file changes”，对，你明白了什么没有，Sass可以自动监听Sass文件，一旦文件变化了，就自动更新该Sass文件对应的CSS文件了。

现在，你的Web前端开发还停留在无休止的”F5”或者”Ctrl + F5”这一旧石器时代吗？如果是，你该对自己说，我真的落伍了。开发过程中，修改了CSS文件、JavaScript文件、HTML文件或者Image图片后，真的需要手动清除浏览器的缓存，然后刷新吗？答案，不需要，你需要了解LiveReload，哥们去学习一下Grunt吧。

Sass的@media

在线文档：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#media

现在前端开发是什么时代，是HTML5 + CSS3时代，是移动互联时代。如果你还不知道media queries是何方神圣，那么你是不是要自责一下，然后默默地去开始你的CSS3漫漫长路~

Sass的@import

在线文档：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import

在编写高质量CSS的漫漫征途中，模块化永远是一个无法避免的话题，什么样的CSS代码是高效可靠的、维护性很好的，模块化是一个不是标准的标准答案。如果你曾经在自己职业生涯中使用过CSS框架组织代码，无论是按功能划分- font.css/color.css/layout.css；还是按区块划分 - head.css/foot.css/sidebar.css/main.css；亦或按职能划分 - base.css/common.css/page.css，那么恭喜你，Sass的@import将会将你的组织思想发挥得淋漓精致。

Sass的@extend

在线文档：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

如果你是标准的面向对象的工程师，你可能会对任何不提供面向对象特性的脚本语言(如JavaScript)不屑一顾，这里我也不多说了，我只能说我以前也是很不懂事的~ 如果你很好的理解并使用@extend技巧，你将受益良多。

Sass的Keyword Arguments

在线文档：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#keyword_arguments

刚开始接触SassScript的keyword arguments时，我还是着实开心了一下，作为后起之秀的脚本语言，它在程序设计的层次上，已经将JSON风格作为参数考虑进来了，下面就稍稍给个例子吧

p {  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);}

Sass的强大后援团Compass

这里我只想用一句话概括，没有Compass的Sass，就像没有UI库的ExtJS，孤独寂寞冷。Compass 是一种开放源码 CSS 创作框架，它使用了 Sass 样式表语言。其多种可重用设计模式（使用混入）能够帮助您构造可靠、强大的样式表。Compass 常用代码库是 Sass 开发工作中不可或缺的工具。

当然Sass给我们带来的惊喜远远不止这些，她的优雅在举止神态中，也会让人感觉惊喜连连。

写在后面的话

这是该系列的第一部分，后面将深入地和大家探讨如何在项目中实践Sass，如何写出优雅高质量的代码。主要包含两部分：结合Compass探讨Sass代码的组织以及结合Grunt JS探讨如何在项目中高效使用Sass。

写作说明：本人致力于Web前端开发，熟悉基于JavaScript的所有框架，基于CSS的部分框架，精通jQuery, Backbone，对HTML5和CSS3有深入了解。对于前端开发流程有比较深入的实践，现致力于Grunt JS的推广。最近深入研究移动Web开发，对Hybrid Application情有独钟，致力于开发针对Hybrid Web应用的基于HTML5 API的框架。

如果有谁对针对Hybrid Web (Android、iOS)应用的基于HTML5 API的框架看法有兴趣的，可以联系本人，QQ 1321518080