快速书写CSS---Sass
如果你已经看过我的文章快速书写html代码---Zen Coding，那么接下来我就介绍如何快速书写 CSS 。
CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。通过 CSS 预处理器，即 CSS 框架，能够提高 CSS 的书写速度，也可以让你的 CSS 更加简洁，适应性更强，代码更直观。
什么是 CSS 预处理器?
是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得 CSS 的开发，变得简单和可维护。
是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧。
CSS 预处理器技术已经非常的成熟，这里就简单介绍SASS。（最为普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。）
不要再停留在石器时代了，下面让我们开始 CSS 预处理器之旅。
我们从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操作符等介绍：
语法
Sass 使用的是标准的 CSS 语法，因此如果你可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名。
/* style.scss */
h1 {
color: #0982C1;
}
变量
你可以在 CSS 预处理器中声明变量，并在整个样式单中使用，支持任何类型的变量，例如颜色、数值（不管是否包括单位）、文本。然后你可以任意引用该变量。
Sass 的变量必须是 $ 开始，然后变量名和值使用冒号隔开，跟 CSS 的属性一致：
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
color: $mainColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
最终产生的结果：
body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
} 嵌套
如果我们需要在CSS中相同的 parent 引用多个元素，这将是非常乏味的，你需要一遍又一遍地写 parent。例如：
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
而如果用 CSS 预处理器，就可以少些很多单词，而且父子节点关系一目了然。
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
} 最终生成的 CSS 结果是：
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
} 非常之方便！
Mixins (混入)
Mixins 有点像是函数或者是宏，当你某段 CSS 经常需要在多个元素中使用时，你可以为这些共用的 CSS 定义一个 Mixin，然后你只需要在需要引用这些 CSS 地方调用该 Mixin 即可。
/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
@ include error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
@ include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}
最终将编译成如下的 CSS 样式：
.generic-error {
padding: 20px;
margin: 4px;
border: 2px solid #f00;
color: #f00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
border: 5px solid #f00;
color: #f00;
}
继承
当我们需要为多个元素定义相同样式的时候，我们可以考虑使用继承的做法。例如我们经常需要：
p,
ul,
ol {
/* styles here */
}
在 Sass 我们可以这样写：
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block; /* Inherit styles from '.block' */
border: 1px solid #EEE;
}
ul, ol {
@extend .block; /* Inherit styles from '.block' */
color: #333;
text-transform: uppercase;
}
在这里首先定义 .block 块，然后让 p 、ul 和 ol 元素继承 .block ，最终生成的 CSS 如下：
.block, p, ul, ol {
margin: 10px 5px;
padding: 2px;
}
p {
border: 1px solid #EEE;
}
ul, ol {
color: #333;
text-transform: uppercase;
}
导入 (Import)
很多 CSS 开发者对导入的做法都不太感冒，因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同，它只是在语义上包含了不同的文件，但最终结果是一个单一的 CSS 文件，如果你是通过@ import "file.css"; 导入 CSS 文件，那效果跟普通的 CSS 导入一样。注意：导入文件中定义的混入、变量等信息也将会被引入到主样式文件中，因此需要避免它们互相冲突。
reset.css:
/* file.{type} */
body {
background: #EEE;
} main.xxx:
@ import "reset.css";
@ import "file.{type}";
p {
background: #0982C1;
}
最终生成的 CSS：
@ import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
}
颜色函数
CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。
lighten($color, 10%); /* returns a color 10% lighter than $color */
darken($color, 10%); /* returns a color 10% darker than $color */
saturate($color, 10%); /* returns a color 10% more saturated than $color */
desaturate($color, 10%); /* returns a color 10% less saturated than $color */
grayscale($color); /* returns grayscale of $color */
complement($color); /* returns complement color of $color */
invert($color); /* returns inverted color of $color */
mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */
实例：
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);
}
运算符
你可以直接在 CSS 预处理器中进行样式的计算，例如：
body {
margin: (14px/2);
top: 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}
一些跟具体浏览器相关的处理
这是宣传使用预处理的原因之一，并且是一个很好的理由，这样可以节省的大量的时间和汗水。创建一个mixin来处理不同浏览器的CSS写法是很简单的，节省了大量的重复工作和痛苦的代码编辑。
@mixin border-radius($values) {
-webkit-border-radius: $values;
-moz-border-radius: $values;
border-radius: $values;
}
div {
@ include border-radius(10px);
}
编译结果：
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} 3D文本
要生成具有 3D 效果的文本可以使用 text-shadows ，唯一的问题就是当要修改颜色的时候就非常的麻烦，而通过 mixin 和颜色函数可以很轻松的实现：
@mixin text3d($color) {
color: $color;
text-shadow: 1px 1px 0px darken($color, 5%),
2px 2px 0px darken($color, 10%),
3px 3px 0px darken($color, 15%),
4px 4px 0px darken($color, 20%),
4px 4px 2px #000;
}
h1 {
font-size: 32pt;
@ include text3d(#0982c1);
} 生成的 CSS
span {
font-size: 32pt;
color: #0982c1;
text-shadow: 1px 1px 0px #097bb7,
2px 2px 0px #0875ae,
3px 3px 0px #086fa4,
4px 4px 0px #07689a,
4px 4px 2px #000;
} 布局处理
$siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;
body {
margin: 0 auto;
width: $siteWidth;
}
.content {
float: left;
width: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar {
float: left;
margin-left: $gutterWidth;
width: $sidebarWidth;
} 实际效果：
body {
margin: 0 auto;
width: 1024px;
}
.content {
float: left;
width: 704px;
}
.sidebar {
float: left;
margin-left: 20px;
width: 300px;
}
错误报告
如果你经常 CSS 你会发现很难找到 CSS 中错误的地方，这也是预处理框架的好处，它会报告错误。
注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
安装Sass
请参考：
http://blog.jnecw.com/?p=660