Sass，Compass与CSS3者的关系

曾经有一位古人说过：“如果你有一把锤子，那么所有的东西都会看起来像钉子。”；还有一位今人说过：“如果你有一颗钉子，那么你就会满大街找锤子。”。无论锤子亦或是钉子都是工具，而Compass和SASS恰恰扮演的就是锤子和钉子的角色，CSS则对应使用锤子和钉子最后完成的作品。——慕课网讲师·刘炬光

人们走进喧闹中去，是为了忘记孤寂。

人生不止眼前的苟且，还有诗和远方。——高晓松

compass初窥

安装好sass和compass后创建compass项目compass create compass-in-action(更多命令可以使用compass --help查看)

接下来我们在项目根目录下可以使用compass watch命令监听sass文件的变化

compass核心模块概述

我们只要执行了@import "compass"就会引入核心的5个模块，依次是：CSS3，Helpers（多是函数），Typography，Utilities（多事mixin）和Browser（配置默认支持哪些浏览器）。但是以下的2歌模块需要明确引入：

reset:@import "compass/reset"
layout:@import "compass/layout"

compass核心模块

compass的周边生态非常丰富，我们可以使用gem install compass-normalize来安装normalize插件来替代默认的reset。然后修改config.rb即可。

layout模块

该模块又引入了3个子模块：

grid-background：根据指定的颜色生成背景填充。
sticky-footer:footer自动位于底部。
stretching:绝对定位并且可以设定上右下左的值。

css3模块和browser support模块

该模块提供了跨浏览器的CSS3的支持，compass为我们封装了针对浏览器差异的mixin，只需要调用即可，不必关心具体差异。

有时候我们只需要兼容webkit内核（例如webapp），不需要兼容moz和opera，这时我们可以配置brower support模块，让它针对某个浏览器的特定版本生成代码。

Typography

该模块主要用于修饰文本样式、垂直韵律等。

一些小技巧

sass中通过@include指令调用mixin。
sass两种语法的转换可以使用sass-convert命令。
css要注意语义化。例如对于一个错误消息红色字体，我们一般的做法是定义一个.red类，但是更推荐的做法是定义一个.error类。
可以使用@debug指令生成日志。
可以使用compass interactive进入compass的REPL模式进行交互。
隐藏文字，可以将text-indent设置为无穷，overflow:hidden；还可以将字体设置为0，颜色设置为透明。
表格的第一行和表格的第一列都要使用<th>标签，都是表头。
图标字体可以在icomoon上找到。
注意：::after和::before这样的伪元素必须指明content这个属性,content中的换行可以使用\A并设置white-space: pre;。
滚动条大部分是位于html上的，而对于像chrome这样的浏览器，它是位于body上的。
快速填充文本产生滚动条，可以巧用emmenet语法：p{text}*100。

本节代码可以到：coding.net找到。

扩展阅读

Q1:css中原生的@import指令有什么弊端？
A1:该指令必须放在最前面；最性能不利，浏览器解析到高指令的时候将会被阻塞去下载被引入的css。

Q2:为什么CSS选择符越长，渲染性能越低下？
A2:因为浏览器渲染样式的时候总是从最内侧的样式渲染到最外面，直到遇到html这个标记。所以CSS选择符不应该过多嵌套，最佳实践是取较长的CSS类名代替嵌套，但是这样代码的结构又变得不太清晰，sass的@at-root指令很好解决了这个问题。虽然我们嵌套书写了，但是最终生成的CSS却是不包含嵌套的。

Q3:require.js存在的意义是什么？
A3：①将代码封装在模块内部，可以避免命名冲突（项目的后期新加入一些童鞋可能变量命名和前面的重复了）；②声明不同js文件之间的依赖；③可以让我们写出模块化的JavaScript代码，方便以后的复用，也便于职责分工。

我们可以使用koala图形化工具来实时编译less、sass和coffee