HTML和CSS高级指南之五——预处理器_HTML和CSS高级指南教程

作者：大漠日期：2013-02-20 点击：2598

本文由大漠根据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
Sass & Scss
其他预处理器

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

上一篇: HTML和CSS高级指南之一——性能与架构 | 下一篇: HTML和CSS高级指南之四——响应式设计

w3cplus

HTML和CSS高级指南之五——预处理器

Haml

查看一个文件或目录

处理文本

Sass & Scss

将SCSS文件转换成Sass或者Sass转换成SCSS

SCSS VS Sass

其他预处理器

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品

w3cplus

你在这里

HTML和CSS高级指南之五——预处理器

Haml

查看一个文件或目录

处理文本

Sass & Scss

将SCSS文件转换成Sass或者Sass转换成SCSS

SCSS VS Sass

其他预处理器

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品