sass入门教程

Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。

注：Sass官网地址： http://sass-lang.com

1.Sass的安装

Sass是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以正常使用Sass。只是必须先安装Ruby，然后再安装Sass。

首先安装Ruby，如果你使用的是 ios 系统，那么你的系统已经安装好了Ruby。如果你使用的是微软的Windows系统，那么安装就有些许的麻烦。不过也不用过于担心，按照下面的步骤就能帮你快速的安装好。

到RubyInstaller官网上 下载Ruby安装文件 （随意选择一个版本），此处选择的是最新版本Ruby1.9.3-p385：

Ruby安装文件下载好后，可以按应用软件安装步骤进行安装Ruby。在安装过程中，个人建议将其安装在C盘下，在安装过程中选择第二个选项，如下图所示：

Ruby安装完成后，在开始菜单中找到新安装的Ruby，并启动Ruby的Command控制面板，如下图所示：

在启动的Ruby命令控制面板中输入下面的命令：

gem install sass

输入上面命令，回车后就会自动安装Sass：

这样Sass就安装成功了，也就可以使用了。

1.Sass源文件转译成CSS文件

Sass文件就是普通的文本文件，不过其文件后缀名有两种，一种为“.sass”；另一种为“.scss”。我们一般用“.scss”就好，至于这 两种文件扩展名的区别在于“.sass”是Sass语言文件的扩展后缀名，而“.scss”是SCSS语言文件的扩展后缀名，至于Sass和SCSS的详 细区别这里不做介绍。你可以简单的理解为他们都是CSS预处理器语言，而且两者功能特性都一样，只是书写规则不同而以。

要转译Sass文件的前提是有文件可转，因此先在项目中创建一个Sass文件，此例中将其命名为“style.scss”，并且将其放在对应的项目样式中，如D盘的“www/workspace/Sass/css”目录下。

启动Ruby的Command控制面板，找到需要转译的Sass文件，如此例此文件放置在D盘的“www/workspace/Sass/css”目录下：

如果仅针对于单文件的转译，需要将“style.scss”转译成“style.css”，只需要在对应的目录下输入下面的命令：

$ sass style.scss style.css

这样原本在D盘的“www/workspace/Sass/css”目录下只有“style.scss”这个文件，现在增加了一个“style.css”文件，而这个CSS文件我们就可以用来调用，他也就是“style.scss”转译出来的样式文件。

当然，我们不可能每保存一次这个Sass文件就来执行一回这个转译命令。那么有没有更好的办法实现呢？回答是肯定的，可以通过下面的监听命令实现，这样一来只要Sass文件做了修改，就会自动更新对应的CSS样式文件。

单文件的监听，只需要在刚才的命令控制面板中输入：

$ sass --watch style.scss:style.css

按下回车键（Enter）,就会看到下面的提示信息：

看到上图所示的提示信息就表示监听成功，这样一来，你只要修改了“style.scss”文件，“style.css”文件就会随着更新变化。

对于一个项目而言，不太可能只有一个CSS样式文件，如果有多个Sass文件需要监听时，就很有必要的组织一下。默认情况之下，我喜欢把所有的 Sass文件放在“/css/sass”目录中，而生成的CSS文件则直接放在“/css”目录下。现在我们修改一下项目文件目录结构，在“/css”目 录中再创建一个“sass”目录，并找刚才创建的“style.scss”文件移至“/css/sass”目录下。此时监听“css/sass”下的所有 Sass文件时，可以在命令面板中输入如下格式的命令：

$ sass --watch sassFileDirectory:cssFileDirectory

在本例中，冒号前面的“sassFileDirectory”是指“/css/sass”下的“sass”目录，意思是要编译的文件；冒号后面的“cssFileDirectory”是指“css”目录，意思是把sass编译成css文件后所放的位置；

注意：是你所在文件的下面

对应的命令就是：

$ sass --watch css/sass:css

回车后，同样可以得到提示信息：

除了使用Ruby的Command控制面板转译Sass之外还可以考虑第三方工具，比如说有名的Compass.app和fire.app。

1.Sass语法

Sass3.0版本开始使用的是标准的CSS语法，和SCSS可以说是一样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写：

/*style.sass 新版语法规则 */

h1{

  color:#936;

  background-color:#333;

}

正如你所看到的，在Sass样式中，这样的代码是在简单不过的了。

重要的一点是，Sass也同时支持老的语法，老的语法和常规的CSS语法略有不同，他需要严格的语法，任何的缩进和字符的错误都会造成样式的编译错 误。Sass可以省略大括号（｛｝）和分号（；），完全依靠严格的缩进和格式化代码，而且文件使用“.sass”扩展名，他的语法类似于：

/*style.sass*/

h1

  color:#936

  background-color: #333

Sass的变量

Sass声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）分隔开。就像CSS属性设置一样：

/* 声明变量 */

$mainColor: #963;

$siteWidth: 1024px;

$borderStyle: dotted;

/* 调用变量 */                              |  /* 转译出来的 CSS*/

------------------------------------------+------------------------------

body {                                    |  body {

  color: $mainColor;                      |    color: #963;

  border:1px $borderStyle $mainColor;     |    border:1px dotted #963;

  max-width: $siteWidth;                  |    max-width: 1024px;

}                                         |  }

2.作用域（Scope）

CSS预处理器语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是Scope（变量范围，开发人员习惯称之为作用 域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子 来解释这三款CSS预处理器的作用域使用。

a)Sass的作用域

Sass中作用域在这三款预处理器是最差的，可以说在Sass中是不存在什么全局变量。具体来看下面的代码：

/*Sass 样式 */

$color: black;

.scoped {

  $bg: blue;

  $color: white;

  color: $color;

  background-color:$bg;

}

.unscoped {

  color:$color;

}

先看转译出来的CSS样式：

.scoped {

  color:white;/* 是白色 */

  background-color:blue;

}

.unscoped {

  color:white;/* 白色（无全局变量概念） */

}

示例明显的告诉我们，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

.混合(Mixins)

Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。 平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式 定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择 器，还可以在Mixins中定义变量或者默认参数。

a)Sass的混合

Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。

在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。

一起来看个简单的例子，比如说在你的Sass样式中定义了一个名叫“error”的Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”：

/* 声明一个 Mixin 叫作 “error”*/

@mixin error($borderWidth:2px){

  border:$borderWidth solid #f00;

  color: #f00;

}

/* 调用 error Mixins*/

.generic-error {

  @include error();/* 直接调用 error mixins*/

}

.login-error {

  @include error(5px);/* 调用 error mixins ，并将参数 $borderWidth 的值重定义为 5px*/

}

4.嵌套（Nesting）

CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多 个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。

section {

  margin:10px;

}

section nav {

  height:25px;

}

section nav a {

  color: #0982c1;

}

section nav a:hover {

  text-decoration: underline;

}

相反，使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号（｛｝）里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：

section {

  margin:10px;

  nav {

    height:25px;

    a {

      color:#0982c1;

      &:hover {

        text-decoration:underline;

      }

    }

  }

}

上面的预处理器转译出来的CSS代码和我们开始展示的CSS代码是相同的，非常的方便吧！

5.继承（Inheritance）

对于熟悉CSS的同学来说，对于属性的继承并不陌生。平时在写CSS样式常碰到多个元素应用相同的样式时，我们在CSS中通常都是这样写：

p,ul,ol{/* 样式写在这里 */} 这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦。为了应对这个问题，CSS预处理器语言可以从一个选择继承另个选择器下的所有样式。

a)Sass的继承

Sass的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始，后面紧跟被继承的选择器：

.block {

  margin: 10px 5px;

  padding: 2px;

}

p {

  @extend .block;/* 继承 .block 选择器下所有样式 */

  border: 1px solid #eee;

}

ul,ol {

  @extend .block; /* 继承 .block 选择器下所有样式 */

  color: #333;

  text-transform: uppercase;

}

上面的代码转译成CSS：

.block,p,ul,ol {

  margin: 10px 5px;

  padding:2px;

}

p {

  border: 1px solid #eee

}

ul,ol {

  color:#333;

  text-transform:uppercase;

}

6.运算符（Operations）

CSS预处理器语言还具有运算的特性，其简单的讲，就是对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。这样的特性在CSS样式中是想都不敢想的，但在CSS预处理器语言中对样式做一些运算一点问题都没有了，例如：

上面代码是LESS的运算示例，声明一下，在取得“@quarter_page”变量时，我们可以直接除以4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”（这个运算顺序小学生也知道）。在复合型运算中，小括号也是很有必要的，例如：

border: (@width / 2) solid #000;

Sass在数字运算上要比LESS更专业，他可以直接换算单位了。Sass可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

7.颜色函数

颜色函数是CSS预处理器语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色等处理十分的方便。

a)Sass颜色函数

lighten($color, 10%); /* 返回的颜色在 $color 基础上变亮 10% */

darken($color, 10%);  /* 返回的颜色在 $color 基础上变暗 10% */

saturate($color, 10%);   /* 返回的颜色在 $color 基础上饱和度增加 10% */

desaturate($color, 10%); /* 返回的颜色在 $color 基础上饱和度减少 10% */

grayscale($color);  /* 返回 $color 的灰度色 */

complement($color); /* 返回 $color 的补色 */

invert($color);     /* 返回 $color 的反相色 */

mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色 */

这只是Sass中颜色函数的一个简单列表，更多详细的介绍可以阅读 Sass文档 。

颜色函数可以运用到任何一个元素上，只要其有颜色的属性，下面是一个简单的例子：

$color: #0982C1;

h1 {

  background: $color;

  border: 3px solid darken($color, 50%);/* 边框颜色在 $color 的基础上变暗 50%*/

}

8.导入（Import）

在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和 CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到 主样式文件中，因此需要避免他们的相互冲突。

Sass、LESS和Stylus三款CSS预处理器语言，导入样式的方法都是一样：

被导入文件的样式：

/* file.{type} */

body {

  background: #EEE;

}

需要导入样式的文件：

@import "reset.css";

@import "file.{type}";

p {

  background: #0982C1;

}

转译出来的CSS代码：

@import "reset.css";

body {

  background: #EEE;

}

p {

  background: #0982C1;

}

9.注释（Comment）

CSS预处理器语言中的注释是比较基础的一部分，这三款预处理器语言除了具有标准的CSS注释之外，还具有单行注释，只不过单行注释不会被转译出来。

a)Sass、LESS的多行注释 。

/*

 * 我是注释

*/

body

  padding 5px

b)Sass、LESS的单行注释

单行注释跟JavaScript语言中的注释一样，使用双斜杠（//），但单行注释不会输出到CSS中。

// 我是注释

七、CSS预处理器的高级应用

我们知道，Sass、LESS都具有变量、混合、嵌套、函数和作用域等特性，但这些特性都是一些普通的特性。其实除了这些特性之外， 他们还拥有一些很有趣的特性有助于我们的开发，例如条件语句、循环语句等。接下来，我们同样从使用上来对比一下这三款CSS预处理器语言在这方面应用又有 何不同异同。

a)条件语句

说到编程，对于编程基本控制流，大家并不会感到陌生，除了循环就是条件了。条件提供了语言的可控制，否则就是纯粹的静态语言。提供的条件有导入、混合、函数以及更多。在编程语言中常见的条件语句：

if/else if/else

if表达式满足（true）的时候执行后面语然块，否则，继续后面的else if或else。

在这三款 css3 预处理器语言中都具有这种思想，只不过LESS中表达的方式略有不现，接下来我们依次看看他们具体如何使用。

Sass的条件语句

Sass样式中的条件语句和其他编程语言的条件语句非常相似，在样式中可以使用“@if”来进行判断：

p {

  @if 1 + 1 == 2 { border: 1px solid;  }

  @if 5 < 3      { border: 2px dotted; }

  @if null       { border: 3px double; }

}

编译出来的CSS：

p {

  border: 1px solid;

}

在Sass中条件语句还可以和@else if、@else配套使用：

$type: monster;

p {

  @if $type == ocean {

    color: blue;

  } @else if $type == matador {

    color: red;

  } @else if $type == monster {

    color: green;

  } @else {

    color: black;

  }

}

转译出来的CSS：

p {color:green;}

b)循环语句

Sass和Stylus还支持for循环语句，而LESS并没支持for循环语句，但值得庆幸的是，在LESS中可以使用When来模拟出for循环的特性。

Sass的循环语句

Sass中使用for循环语句需要使用@for，并且配合“from”和“through”一起使用，其基本语法：

@for $var from <start> through <end> { 语句块 }

我们来看一个简单的例子：

@for $i from 1 through 3 {

  .item-#{$i} { width: 2em * $i; }

}

转译出来的CSS代码：

.item-1 {  width: 2em; }

.item-2 {  width: 4em; }

.item-3 {  width: 6em; }

在Sass中循环语句除了@for语句之外，还有@each语句和@while语句

@each循环语法：

@each $var in <list>{ 语句块 }

来看个简单的实例：

@each $animal in puma, sea-slug, egret, salamander {

  .#{$animal}-icon {

    background-image: url('/images/#{$animal}.png');

  }

}

转译出来的CSS

.puma-icon {  background-image: url('/images/puma.png'); }

.sea-slug-icon {  background-image: url('/images/sea-slug.png'); }

.egret-icon {  background-image: url('/images/egret.png'); }

.salamander-icon {  background-image: url('/images/salamander.png')       }

@while循环使用和其他编程语言类似：

$i: 6;

@while $i > 0 {

  .item-#{$i} { width: 2em * $i; }

  $i: $i - 2;

}

转译出来的CSS

.item-6 {  width: 12em; }

.item-4 {  width: 8em; }

.item-2 {  width: 4em; }