本文由大漠根据Shay Howe的《An Adavnced Guide to HTML & CSS》第五课《Preprocessors》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://learn.shayhowe.com/advanced-html-css/preprocessors，以及作者相关信息
作者：Shay Howe
译者：大漠
很多时候感觉写HTML和CSS很费力,因为我们要一遍一遍的写一些重复的东西。例如一些HTML的关闭标签和一些十六进制的CSS颜色值。
这些相同的任务，看起来是小，但加起来效率就低了。幸运的是,这些效率低下的工作,预处理器可以解决.
预处理器是一种程序，需要将一种程序的数据转换成另一种程序的数据。对于HTML和CSS,有一些流行的预处器语言,比如 Haml和 Sass。Haml是生成HTML的，Sass是生成CSS的。
在着手解决一些常见的问题时，发现Haml和Sass使用HTML和CSS解决效率低的问题，还创建了一些方法，使创建网站更容易也更合乎逻辑。预处理器的普及也带了一些支持我们的框架要，其中最爱欢迎的是 Compass。
Haml
Haml被称为 Html的抽象语言,以提供漂亮标记为目标,是一种标记语言。作为自己的一种标记语言,代码写成Haml,然后转译成HTML。Haml促进结构标记良好,提供一个令人愉快的体验,让每个人都能写或能读它。
安装
Haml需要安装Ruby才能转译成HTML,所以你要使用他,首先要确保你已安装了Ruby。对天使用Mac OSX是幸运的，因为他已预安装了Ruby，对于使用Window的用户来说,需要阅读 Windows下安装来安装Ruby。确认安装Ruby后,在你的命令终端运行"gem install haml"来安装Haml。
gem install haml
Haml模板文件需要保存为扩展名为“.haml”文件。然后需要在命令终端中为每个文件运行编译命令,才能将haml转译成HTML。
haml index.haml index.html
在上面的例子中，同一目录下的“index.haml”将转译成HTML结构，并将文件保存为“index.html”。这个命令必须在同一个目录下运行。在任何时候,你都可以输入命令"haml -- help"来查看haml命令列表项。
查看一个文件或目录
不幸的是Haml不提供查看一个文件或者目录的方法，因此需要依赖另一个选项来进行改变。
在Rails应用程序中,Haml依赖于Gemfile,这样Haml的改动就可以自动转译到HTML文件中。有一些桌面应用无法使用Rails,一个比较流行的是 CodeKit
另外Haml CodeKit还支持其他的预处理器，也比较好入手。
文档类型
第一部分要在Haml中写一个文档,知道在使用什么文档类型。当在使用HTML文档时,常用的一种文档类型是"HTML5"文档类型。定义haml文档类型是使用三个感叹号（!!!），随后可以紧跟一些必要的参数设置.
在Haml中默认的文档类型是HTML1.0过渡形,如果需要使用HTML5的文档类型,需要使用三个感叹号,后面紧跟一个参数5。
HAML
!!! 5
转译成HTML
<!DOCTYPE html>
声明元素
Haml最显著的特征是他的语法，以及如何 声明和嵌套元素。HTML元素通常都有开始和闭合标签，然而在Haml中元素只有一个开始标签。元素都是使用百分号（%）定义开始和使用缩进来识别元素的嵌套。Haml的缩进可以是一个或者多个空格组成,但重要的是缩进需要保持一致。Tab和空格不能混合在一起使用,并且在相同的文件中,相同数量的tab或者空格必须是相同的。
删除开如和闭合标签，而且根据大纲制作一个匹配的结构,这样在任何时间浏览或修改都不会造成冲突。
HAML
%body
%header
%h1 Hello World
%section
%p Lorem ipsum dolor sit amet.
转译成HTML
<body>
<header>
<h1>Hello World</h1>
<header>
<section>
<p>Lorem ipsum dolor sit amet.</p>
</section>
</body>
处理文本
在Haml文本可以放在元素的同一行进行声明,也可以元素后面断行缩进进行声明。文本不能同时在声明元素或嵌套元素的同一行,上面的例子可以将代码重新写成:
%body
%header
%h1
Hello World
%section
%p
Lorem ipsum dolor sit amet.
属性
在Haml中,属性的声明与元素的声明有些不一样。属性的声明直接在元素的后面跟上{}或者(),但在Ruby和HTL语法中不一样。在Ruby中属性样式使用的是hash语法，都放在｛｝里，在HTML中属性样式使用的是标准的HTML语法，放在（）里。
HAML
%img{:src => "shay.jpg", :alt => "Shay Howe"}
%img{src: "shay.jpg", alt: "Shay Howe"}
%img(src="shay.jpg" alt="Shay Howe")
转译出来的HTML
<img src="shay.jpg" alt="Shay Howe">
Classes和IDs
Class和ID属性声明和其他属性的声明一样，但他们有时也有点不一样。类名的列表与ID是直接跟在元素的后面而不需要使用{}和()。在元素的后面紧跟"."来定义类名和使用“#”来定义ID。
然而，使用一定的格式可以把属性混合在一起匹配。类名使用“.”来匹配，而其他属性使用之前所说的格式来匹配。
HAML
%section.feature
%section.feature.special
%section#hello
%section#hello.feature(role="region")
转译成HTML
<section class="feature"></section>
<section class="feature special"></section>
<section id="hello"></section>
<section class="feature" id="hello" role="region"></section>
Div的类名和IDs
事实上，如果一个类名或者ID用在“div”上，那么“%”符号可以省略，并且类名和ID或者ID可以直接使用。同样类名用“.”来定义，ID用“#”来定义。
HAML
.awesome
.awesome.lesson
#getting-started.lesson
转译成HTML
<div class="awesome"></div>
<div class="awesome lesson"></div>
<div class="lesson" id="getting-started"></div>
布尔属性
在Ruby或者HTML中布尔属性处理方式都取决于所使用的语法。
HAML
%input{:type => "checkbox", :checked => true}
%input(type="checkbox" checked=true)
%input(type="checkbox" checked)
转译出来的HTML
<input type="radio" checked >
转译文本
Haml另一个好处是可以求值和运行Ruby，便这并不总是理想的。文本和代码行数可以使用反斜杠“\”避开，使用文本没有明显的执行。
在下面的例子中，第一行语句“= @author”在Ruby中执行，从应用程序中调用作者的名字，第二行语句使用了反斜杠“\”避开调用程序，只显示文本。
HAML
.author
= @author
\= @author
转译成HTML
<div class="author">
Shay Howe
= @author
</div>
文本转译的替代方案
有时候文本的转译不是工作的需要，Ruby需要打印出所需要的内容。一个典型的例子就是，一个段落需要输入一个链接，而不是链接的文本。把一个句号放在新的一行是不会接受，他会认为定义一个空的类名，这样将会引起一个错误。在句号前使用一个反斜杠“\”，可以转译这个字符，但最后一句和句号之间只会产生一个空白。再一次不会直接输出。
在这些情况下，Ruby的帮助能派上用场。在下面的例子中，帮助助手用于放置一个句号，后面直接跟上最后一句话，但仍然输出锚文本。
HAML
%p
Shay is
= succeed "." do
%a{:href => "#"} awesome
转译成HTML
<p>Shay is <a href="#">awesome</a>.
注释
在Haml中注解和元素与属性的处理方式有点不一样。最简单的，可以使用斜杠（/）来注解掉代码。一行代码的注释，可以在代码行开始之处使得一个斜杠（/），块注释掉的代码，斜杠（/）放在嵌套代码前面。
HAML
%div
/ Commented line
Actual line
/
%div
Commented block
转译成HTML
<div>
<!-- Commented line -->
Actual line
</div>
<!--
<div>
Commented block
</div>
-->
条件注释
在Haml中条件注释处理方式也不一样。创建条件注释需要使用到方括号[]，在里面放上条件。这些方框号要直接放在反斜杠（\）后面。
HAML
/[if lt IE 9]
%script{:src => "html5shiv.js"}
转译成HTML
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
无记载的注释
Haml也可以提供Haml具体的注释和无记载的注释。无记载的注释不同于一般的Haml注释，页面输出是不会有任何注释内容，也不会显示出来。无记载的注释使用一个破折号和一个井号（-#）来声明。与其他注释相比，无记载注释还可以删除一行或多行的嵌套。
HAML
%div
-# Removed line
Actual line
转译成HTML
<div>
Actual line
</div>
过滤器
Haml提供了少量的过滤器，允许在Haml内输出一些不同类型。过滤器的定义是使用冒号（：），后面紧跟一个过滤器名，例如“:markdown”，所有过滤内容嵌套在他下面。
常见的过滤器
下面是一些常用的过滤器名，其中“:css”和“:javascript”是使用最多的。
-
:cdata
-
:coffee
-
:css
-
:erb
-
:escaped
-
:javascript
-
:less
-
:markdown
-
:maruku
-
:plain
-
:preserve
-
:ruby
-
:sass
-
:scss
-
:textile
Javascript过滤器
:javascript
$('button').on('click', function(event) {
$('p').hide('slow');
});
转译出来的HTML
<script>
$('button').on('click', function(event) {
$('p').hide('slow');
});
</script>
CSS和Sass过滤器
请注意":sass"或者其他CSS预处理器，不能使用内部的“:css”过滤器。过滤器是一个严格声明的，不能在一个过滤器内嵌套另一个过滤器。
HAML
:css
.container {
margin: 0 auto;
width: 960px;
}
%style
:sass
.container
margin: 0 auto
width: 960px
转译成HTML
<style>
.container {
margin: 0 auto;
width: 960px;
}
</style>
Ruby的插入值
正如前面所言，Haml可以使用Ruby的变量，有时候会使用Ruby来调用变量生成文本。事实上，Ruby有一个内插值功能，Ruby的变量值写在#｛｝内。
下面是一个例子，Ruby插入类名的一部分
HAML
%div{:class => "student-#{@student.name}"}
转译成HTML
<div class="student-shay">
Sass & Scss
SCSS和Sass是CSS预处理器语言，可以将代码转译成CSS，他们和Haml非常相似，可以让我们编写代码简单，也提供一些特些服务。其实SCSS和Sass源自一起，只是他们的语法略有不同。
Sass是 很优秀的样式语言，最重要的,需要遵守严格的缩进嵌套。SCSS,时髦的CSS,和Sass极其相似,但提供更灵活的语法,类似于CSS的语法。
安装
和Haml一样，SCSS和Sass的 转译要使用Ruby,因盯Ruby需要创建CSS文件。在确保安装了Ruby，请按照说明进行安装。
一旦Ruby安装好了，可以在命令行中输入“gem install sass”命令来安装SCSS和Sass。
gem install sass
SCSS或者Sass文件需要以“.scss”或者“.sass”扩展名定义。可以通过下面的命令将这两种文件转译成".css"文件。
sass styles.sass styles.css
上面的命令将“style.sass”转译成“style.css”文件。与Haml一样,这些文件同样要放在一个文件路径下。
也可以通过watch命令，可以看到sass文件转变为css文件。
sass --watch styles.sass:styles.css
此外,而不是编译或者看个人文件,Sass能够编译和观看完整的文件目录。例如,查看Sass文件整个目录或者通过下面的Sass命令，可以将Sass文件转译成css文件。
sass --watch assets/sass:public/css
将SCSS文件转换成Sass或者Sass转换成SCSS
上面介绍了将Sass和SCSS转译成CSS文件,也可以将SCSS转成Sass，反之也可以将Sass转成SCSS。
# Convert Sass to SCSS
sass-convert styles.sass styles.scss
# Convert SCSS to Sass
sass-convert styles.scss styles.sass
语法
正如前面提到的,Sass和SCSS的主要共别就是他们的语法不同。SCSS的语法和常规的CSS并没有太大的不同。事实上,SCSS像CSS一样在内部使用。Sass需要严格的语法,任何缩进和字符的错误都会造成样式的编译错误。Sass可以省略花括号{}和分号(;)，完全依靠严格的缩进和格式化代码。
SCSS
.new {
color: #f60;
font-weight: bold;
span {
text-transform: uppercase;
}
}
SASS
.new
color: #f60
font-weight: bold
span
text-transform: uppercase
转译成CSS
.new {
color: #f60;
font-weight: bold;
}
.new span {
text-transform: uppercase;
}
SCSS VS Sass
决定是否使用SCSS还是Sass归结为个人的爱好和一个团队和项目更适合哪个。另外每个语法都有其自己的优点和却点。
事实上，我更喜欢Sass的语法,因为不用提供更多的字符，我也深信，这是一个简洁的语法。Sass不允许像SCSS一样直接输入CSS，而且不会容忍任何的错误。Sass还有着更多值得我们去学习的曲线。
下面的例子我们主要使用Sass，当然也可以使用SCSS。
嵌套
从上面语法的例子中，你就会注意到，选择器可以嵌套在另一个选择器中，创建一个复合选择器。嵌套还可以快速识别选择器，但不要嵌套的太深。不要模糊的嵌套或者在同一个选择器上嵌套太深。在不提高特殊性情况下使用一个特定的选择器是最生要的。
SASS
.portfolio
border: 1px solid #ccc
ul
list-style: none
li
float: left
转译成CSS
.portfolio {
border: 1px solid #ccc;
}
.portfolio ul {
list-style: none;
}
.portfolio li {
float: left;
}
属性的嵌套
上面介绍的是选择器的嵌套，他还可以属性嵌套。常用的属性嵌套主要是“font”、“margin”、“padding”和“border”。SCSS和Sass一样，都具有这些特性。有些人认为属性缩写比较好，也有人认为缩写没必要，至于怎么选择还是取决于你的爱好。
SASS
div
font:
family: Baskerville, Palatino, serif
style: italic
weight: normal
转译成CSS
div {
font-family: Baskerville, Palatino, serif;
font-style: italic;
font-weight: normal;
}
Media Queries嵌套
Media Queries也可以嵌套在一个选择器，根据媒体的条件来改变属性值。
SASS
.container
width: 960px
@media screen and (max-width: 960px)
width: 100%
转译成CSS
.container {
width: 960px;
}
@media screen and (max-width: 960px) {
.container {
width: 100%;
}
}
父选择器
Sass提供一种方法，父选择嘎嘎到前一个选择器添加样式，主要通过&实现。最常见的父选择器是用于关联一个伪类，例如：“:hover”，然而这并不是必须的。另外父选择器可以用来绑定附加选择器，这也是&的特色。
SASS
a
color: #8ec63f
&:hover
color: #f7941d
转译成CSS
a {
color: #8ec63f;
}
a:hover {
color: #f7941d;
}
父关键选择器
就是说 parent selector 也可以用作关键字选择器，把具有某种特性的元素集合起来作为一个选择集合。 有很多场景可以这么应用parent selector(来作为关键字选择器)，不过最通常，最有用的情形是特征检测。
SASS
.btn
background: linear-gradient(#eee, #ccc)
.no-cssgradients &
background: url("gradient.png") 0 0 repeat-x
转译成
.btn {
background: linear-gradient(#eee, #ccc);
}
.no-cssgradients .btn {
background: url("gradient.png") 0 0 repeat-x;
}
注释
Sass的注释和Haml非常的相似。和标签的CSS注释语法一样，/*...*/,然而Sass还有另一种注释，可以方便的注释一行代码或者注释一行注解。
Sass另一种注释是使用两个斜杠“//”，任何行内容或者嵌套都可以方便的注释掉，但转译出来的CSS会忽略这种注释的内容。注意下面的示例演示在转译出来的CSS中忽略了双斜杠的注释。
SASS
/* Normal comment */
div
background: #333
// Omitted comment
strong
display: block
转译出来的CSS
/* Normal comment */
div {
background: #333;
}
strong {
display: block;
}
变量
变量是Sass提供的另一个特性。在Sass中你可以定义变量，然后在调用这个变量。
Sass中定义变量使用美元符号“$”，紧随其后的是变量名，变量值与变量名之间是一个冒号和空格，例如“$font-base: 1em”。至于变量值可以是数字、字符串、颜色、布尔值或者空，如果变量值有一系列，那么一系列值由空格或逗号分开。
SASS
$font-base: 1em
$serif: "Helvetica Neue", Arial, "Lucida Grande", sans-serif
p
font: $font-base $serif
转译成CSS
p {
font: 1em "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
}
替换变量
在Sass的一个文档内，大部分变量可以在任何地方使用。然而，有时候需要使用“#{}”插入进去。有些时候，变量需要插入进去当作类名，属性值，或者一串文本。
SASS
$location: chicago
$offset: left
.#{$location}
#{$offset}: 20px
转译成CSS
.chicago {
left: 20px;
}
运算
Sass在很多情况也可以做运算，运算可以处理大部分的问题，例如加、减、乘、除和四舍五入。
除了使用加号“+”做加法运算，还可以做有没有单位的运算。当有单位的计算，第一个方程的单位将用于计算。例如，10px像素加上1英寸将等于106px像素。减法的处理方式和加法的相同，只是把加号换成减号。
乘法使用的是“*”符号，然后在任何时候都只使用数字，包括有度量单位的时候。除法使用是百分比符号“%”，和乘法一样，在任何时候只使用数字，包括有度量单位的时候。
SASS
width: 40px + 6
width: 40px - 6
width: 40px * 6
width: 40px % 6
转译成CSS
width: 46px;
width: 34px;
width: 240px;
width: 4px;
除法
在Sass中用于处理一些CSS属性，除法使用斜杠“/”会有点棘手。一般来说，如果CSS值中包含了变量(值包裹在括号内，或者作为另一个等式的一部分)，那么斜杠就会作为除法来生效。
当除法中只有一个单位时，会保留单位，当除法中有两个单位时，结果将会没有单位。
SASS
width: 100px / 10
width: (100px / 10)
width: (100px / 10px)
$width: 100px
width: $width / 10
width: 5px - 100px / 10
转译成CSS
width: 100px/10;
width: 10px;
width: 10;
width: 10px;
width: -5px;
数学运算
你可能希望Sass可以结合多个数学运算，在Sass中也遵循数学运算符的顺序，先算括号内的，在算乘除，在算加减。
SASS
$grid: 16
$column: 40px
$gutter: 20px
$container: ($column * $grid) + ($gutter * $grid)
width: $container
转译成CSS
width: 960px;
数值型函数
默认情况下，Sass包括少量的内部函数，其中许多都是用来操纵数字的。
percentage()函数将值转换为百分数，round()函数将一值转换为整数（四舍五入），ceil()函数将一小数转换一个整数（向上入），floor()函数将一个值转换为整数（向下舍），abs()取一个值的绝对值。
-
percentage()
-
round()
-
ceil()
-
floor()
-
abs()
SASS
width: percentage(2.5)
width: round(2.5px)
width: ceil(2.5px)
width: floor(2.5px)
width: abs(-2.5px)
转译成CSS
width: 250%;
width: 3px;
width: 3px;
width: 2px;
width: 2.5px;
颜色
Sass在处理颜色方面提供了相当多的帮助，提供了处理和管理颜色的不同的特性。在Sass中一个常用的特征是能够改变一个十六进制的颜色，或者变量，或者是将其转换成一个Rgba颜色。
SASS
color: rgba(#8ec63f, .25)
$green: #8ec63f
color: rgba($green, .25)
转换成CSS
color: rgba(142, 198, 63, .25);
颜色运算
可以通过加减乘除计算颜色。如我们想像的，可以对红色、绿色和蓝色进行一些数学方面的计算。
SASS
color: #8ec63f + #666
color: #8ec63f * 2
color: rgba(142, 198, 63, 0.75) / rgba(255, 255, 255, 0.75)
转译成CSS
color: #f4ffa5;
color: #ffff7e;
color: rgba(0, 0, 0, 0.75);
改变颜色
使得颜色运算是非常有用的，但有一些挑战性。在这种情况下，颜色变化可能是一个更好的选择。改变颜色提供了反相、互补、混合色和灰度等几种函数。
-
invert()
-
complement()
-
mix()
-
grayscale()
SASS
color: invert(#8ec63f)
color: complement(#8ec63f)
color: mix(#8ec63f, #fff)
color: mix(#8ec63f, #fff, 10%)
color: grayscale(#8ec63f)
转译成CSS
color: #7139c0;
color: #773fc6;
color: #c6e29f;
color: #f3f9eb;
color: #838383;
改变HSLA颜色
改变HSLA颜色更进一步的添加了一些改变函数，常见改变HSLA的函数包括有：lighten()、darken()、saturate()和desaturate()。
-
lighten()
-
darken()
-
saturate()
-
desaturate()
-
adjust-hue()
-
fade-in()
-
fage-out()
SASS
color: lighten(#8ec63f, 50%)
color: darken(#8ec63f, 30%)
color: saturate(#8ec63f, 75%)
color: desaturate(#8ec63f, 25%)
color: adjust-hue(#8ec63f, 30)
color: adjust-hue(#8ec63f, -30)
color: fade-in(rgba(142, 198, 63, 0), .4)
color: fade-out(#8ec63f, .4)
转译成CSS
color: white;
color: #3b5319;
color: #98ff06;
color: #89a75e;
color: #4ac63f;
color: #c6bb3f;
color: rgba(142, 198, 63, 0.4);
color: rgba(142, 198, 63, 0.6);
颜色操作
Sass的颜色也可以直接操作，操作颜色提供了如何更好控制颜色的特性。当然这个控制也是十分复杂，这种操作也前面所讲的颜色改变操作方法有些不一样。
-
change-color()：设置任何一颜色的属性
-
$color,[$red],[$green],[$blue],[$hue],[$saturation],[$lightness],[$alpha]
-
adjust-color()：递增一个颜色任何属性
-
$color,[$red],[$green],[$blue],[$hue],[$saturation],[$lightness],[$alpha]
-
scale-color()：基于颜色属性上流动划分百分值
-
$color,[$red],[$green],[$blue],[$hue],[$saturation],[$lightness],[$alpha]
SASS
color: change-color(#8ec63f, $red: 60, $green: 255)
color: adjust-color(#8ec63f, $hue: 300, $lightness: 50%)
color: scale-color(#8ec63f, $lightness: 25%, $alpha: 30%)
转译成CSS
color: #3cff3f;
color: white;
color: #aad46f;
继承
继承可以不需要重写代码或者添加任何类名共享一些相同的样式，提供了一个完美的方式来操持模块化。元素和类选择器两者都可以被用作一个扩展，或者一个点位符选择器也可以用于创建继承。
使用“@extend”紧跟选择器来创建继承，而不是复制属性和值，最初的选择器和额外选择器都可以被用作于其他选择器的继承。
总之，这提供了一种方法来快速的重用代码而没有增加代码。此外继承很好的配合了OOCSS和SMACSS创建。
SASS
.alert
border-radius: 10px
padding: 10px 20px
.alert-error
@extend .alert
background: #f2dede
color: #b94a48
转译成CSS
.alert,
.alert-error {
border-radius: 10px;
padding: 10px 20px;
}
.alert-error {
background: #f2dede;
color: #b94a48;
}
占位符选择器继承
为了避免用于继承而创建一些闲置的类，我们可以使用所谓的占位符选择器。占位符选择器是使用百分号（%）来初始化（这在CSS中是从未使用过，来直接编写CSS的）,他是用来代替继承中的选择器。在下面的一个例子中“.alert”选择器是将不会被转译到CSS代码中的。
SASS
%alert
border-radius: 10px
padding: 10px 20px
.alert-error
@extend %alert
background: #f2dede
color: #b94a48
转译成CSS
.alert-error {
border-radius: 10px;
padding: 10px 20px;
}
.alert-error {
background: #f2dede;
color: #b94a48;
}
元素选择器继承
和类选择器一样，元素选择器也可以用于继承中。
SASS
h2
color: #9c6
span
text-decoration: underline
.sub-heading
@extend h2
转译成CSS
h2, .sub-heading {
color: #9c6;
}
h2 span, .sub-heading span {
text-decoration: underline;
}
混合
混合提供了一种简单的模板（包括属性和值），然后可以在不同的选择器共用这个模块。混合和继承不同在于混合允许参数一起继承到基本个地方。
混合使用“@mixin”来进行声明，里面可以设置任何参数，然后任何风格都在规则上描述。调用混合，需要在选择器使得“+”号，同时可以在混合中设置任意参数。
有一点需要注意，在SCSS中调用混合有点不一样，在SCSS中调用混合是使用“@include”来代替“+”号。
SASS
@mixin btn($color, $color-hover)
color: $color
&:hover
color: $color-hover
.btn
+btn($color: #fff, $color-hover: #ccc)
转译成CSS
.btn {
color: #fff;
}
.btn:hover {
color: #ccc;
}
默认参数
使用上面相同的例子，如果你想要，可以在混合中写入默认参数
SASS
@mixin btn($color: #fff, $color-hover: #ddd)
color: $color
&:hover
color: $color-hover
.btn
+btn($color-hover: #ccc)
转译成CSS
.btn {
color: #fff;
}
.btn:hover {
color: #ccc;
}
变量参数
当一个名多个值需要被传递时，参数的变量名可能以带“...”结束，如下面阴影的例子，我们可以通过给阴影每个值用逗号分隔
SASS
@mixin box-shadow($shadows...)
-moz-box-shadow: $shadows
-webkit-box-shadow: $shadows
box-shadow: $shadows
.shadows
+box-shadow(0 1px 2px #eee, inset 0 0 5px #eee)
转译成CSS
.shadows {
-moz-box-shadow: 0 1px 2px #eee, inset 0 0 5px #eee;
-webkit-box-shadow: 0 1px 2px #eee, inset 0 0 5px #eee;
box-shadow: 0 1px 2px #eee, inset 0 0 5px #eee;
}
导入
SASS最好的一个特征是在一个单独的文件中可以导入多个“.scss”或者“.sass”文件。集成所有文件到一个样式表中使用，易于管理，而且不会有其他的HTTP请求。
在HTML文档中只引用一个导入了所有样式表的Sass文件，而不是引用所有不同的样式表。
在下面的例子中，三个文件“_normalize.sass”、“_grid.sass”和“_typography.sass”都引入到一个文件中。事实上只style.sass文件导入了其他的样式文件，然后编译成style.csss。所以在HTML文档中最终只调用了一个style.css文件。
SASS
@import "normalize"
@import "grid", "typography"
转译成CSS
<link href="styles.css" rel="stylesheet">
循环和条件语句
对于更复杂的Sass样式，支持不同控制命令。其重要的理解这些命令，并不用于日常样式，而是创建详细的混合。这些命令看起来很熟悉，因为和其他的编程语言很相似。
运算符
一些循环和条件需要运算符来决定，这些运算符可以分为关系和比较运算符。关系运算符用来决定两个实体之关的关系，而比较运算符用来确定不同实体之间的平等关系。
- <：小于
- >：大于
-
==：等于
- <=：小于或等于
- >=：大于或等于
-
!=：不等于
// Relational Operators
6 < 10 // true
4 >= 60 // true
8 > 2 // true
10 >= 10 // true
// Comparison Operators
#fff == white // true
10 + 30 == 40 // true
normal != bold // true
if语句
@if规则测试表达式，然后加载对应的样式，而表达式把返回的是真假或null。@if语句是加载最初样式规则，也可以使用@else if或@else来判断，一旦某个投机条件就会加载对应条件中的样式。
SASS
$shay: awesome
.shay
@if $shay == awesome
background: #f60
@else if $shay == cool
background: #404853
@else
background: #000
转译成CSS
.shay {
background: #f60;
}
for循环
@for规则基于一个计算器，输出不同的样式，有两种不同的循环形式。例如，“@for $i from 1 to 3”将输出1和1,但不包括3。另外一种方式“@for $i from 1 through 3”将输出1至3,包括3。
SASS
@for $col from 1 to 6
.col-#{$col}
width: 40px * $col
转译成CSS
.col-1 {
width: 40px;
}
.col-2 {
width: 80px;
}
.col-3 {
width: 120px;
}
.col-4 {
width: 160px;
}
.col-5 {
width: 200px;
}
each循环
非常简单，@each规则为每个列表项把回样式，列表可以包含多个列表项，这些列表项用逗号隔开。
SASS
@each $class in uxd, rails, html, css
.#{$class}-logo
background: url('/img/#{$class}.jpg')
转译成CSS
.uxd-logo {
background: url("/img/uxd.jpg");
}
.rails-logo {
background: url("/img/rails.jpg");
}
.html-logo {
background: url("/img/html.jpg");
}
.css-logo {
background: url("/img/css.jpg");
}
while循环
@while规则不断返回样式，直到条件不成立。这个规则可以接受不同的运算和计数器变量，能够精确控制循环输出
SASS
$heading: 1
@while $heading <= 6
h#{$heading}
font-size: 2em - ($heading * .25em)
$heading: $heading + 1
转译成CSS
h1 {
font-size: 1.75em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.75em;
}
h6 {
font-size: 0.5em;
}
其他预处理器
Haml和Sass远非是唯一的预处理器，包括JavaScript预处理器一样。一些流行的预处理器包括：Jade、Slim、LESS、Stylus和CoffeeScript
在这一节课程只覆盖了Haml和Sass两个预处理器。选中他们，是因为它们适合在Ruby和在Rails的Ruby应用程序运行。而且他们还得到了巨大的社区的支持。
当谈到选择，使用哪个预处理器最生要的考虑是你的团队和项目适合哪个。项目建立在Node.js上可能Jade和Stylus更适合。不过最重要的考虑还是要考虑你的团队习惯使用哪个。
上一课下一课（正在整理之中，静请期待）
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
英文原文：http://learn.shayhowe.com/advanced-html-css/preprocessors
中文译文：http://www.w3cplus.com/css/advanced-html-css-lesson5-preprocessors.html
