一、什么是SASS

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

二、安装Sass和Compass2.1 安装sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
但是两者的语法没有关系。不懂Ruby，照样使用。
假定你已经安装好了Ruby，Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：

[JavaScript] 纯文本查看 复制代码

// 安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

然后，就可以使用了。
2.2 编译Sasssass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为input.scss。）

[JavaScript] 纯文本查看 复制代码

// 单文件转换命令
sass input.scss output.css

命令行编译配置选项: 命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种--style、--sourcemap

[JavaScript] 纯文本查看 复制代码

//编译格式
sass --watch input.scss:output.css --style compact

//编译添加调试map
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info

• --style表示解析后的css是什么排版格式;
• --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
  

SASS提供四个编译风格的选项：

• nested：嵌套缩进的css代码，它是默认值。
• expanded：没有缩进的、扩展的css代码。
• compact：简洁格式的css代码。
• compressed：压缩后的css代码。
  

四种编译排版演示:

[CSS] 纯文本查看 复制代码

//未编译样式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

nested 编译排版格式

[CSS] 纯文本查看 复制代码

/*命令行内容*/
sass style.scss:style.css --style nested

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

expanded 编译排版格式

[CSS] 纯文本查看 复制代码

/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

compact 编译排版格式

[CSS] 纯文本查看 复制代码

/*命令行内容*/
sass style.scss:style.css --style compact

/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

[CSS] 纯文本查看 复制代码

/*命令行内容*/
sass style.scss:style.css --style compressed

/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

生产环境当中，一般使用最后一个选项。

[JavaScript] 纯文本查看 复制代码

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

[JavaScript] 纯文本查看 复制代码

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子也可以去（Sass中文文档）试试。
三、基本用法3.1 变量sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width。为什么选择$ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突。
sass变量的声明和css属性的声明很像：

[CSS] 纯文本查看 复制代码

$highlight-color: #F90;

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。这时变 量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。

[CSS] 纯文本查看 复制代码

$color : #1875e7; 

div {
    color : $color;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

[CSS] 纯文本查看 复制代码

$side : left;

.rounded {
    border-#{$side}-radius: 5px;
}

3.2 计算

[CSS] 纯文本查看 复制代码

$var: 10px;
div {
    margin: (28px/2);
    position: absolute;
    top: 30px + 20px;
    left: $var + 20px;
}

3.3 嵌套CSS 规则

在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

[CSS] 纯文本查看 复制代码

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

[CSS] 纯文本查看 复制代码

/* 编译后 */
#content article h1 { color: #333 };
#content article p { margin-bottom: 1.4em };
#content aside { background-color: #EEE };

属性也可以嵌套，比如border-color属性，可以写成：

[CSS] 纯文本查看 复制代码

p {
    border: {
        color: blue
    }
}

注意，border后面必须加上冒号。

在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方。

[CSS] 纯文本查看 复制代码

article a {
  color: blue;
  &:hover { color: red }
}

在为父级选择器添加:hover等伪类时，这种方式非常有用。同时父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。举例来说，当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下：

[CSS] 纯文本查看 复制代码

#content aside {
  color: red;
  body.ie & { color: green }
}

3.4 静默注释css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。
sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScript、Java等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

[CSS] 纯文本查看 复制代码

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

[CSS] 纯文本查看 复制代码

body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
  padding:  /* 这块注释内容也不会出现在生成的css中 */ 0;
}

一、什么是SASS

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

二、安装Sass和Compass2.1 安装sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
但是两者的语法没有关系。不懂Ruby，照样使用。
假定你已经安装好了Ruby，Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：

[JavaScript] 纯文本查看 复制代码

// 安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

然后，就可以使用了。
2.2 编译Sasssass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为input.scss。）

[JavaScript] 纯文本查看 复制代码

// 单文件转换命令
sass input.scss output.css

命令行编译配置选项: 命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种--style、--sourcemap

[JavaScript] 纯文本查看 复制代码

//编译格式
sass --watch input.scss:output.css --style compact

//编译添加调试map
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info

• --style表示解析后的css是什么排版格式;
• --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
  

SASS提供四个编译风格的选项：

• nested：嵌套缩进的css代码，它是默认值。
• expanded：没有缩进的、扩展的css代码。
• compact：简洁格式的css代码。
• compressed：压缩后的css代码。
  

四种编译排版演示:

[CSS] 纯文本查看 复制代码

//未编译样式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

nested 编译排版格式

[CSS] 纯文本查看 复制代码

/*命令行内容*/
sass style.scss:style.css --style nested

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

expanded 编译排版格式

[CSS] 纯文本查看 复制代码

/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

compact 编译排版格式

[CSS] 纯文本查看 复制代码

/*命令行内容*/
sass style.scss:style.css --style compact

/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

[CSS] 纯文本查看 复制代码

/*命令行内容*/
sass style.scss:style.css --style compressed

/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

生产环境当中，一般使用最后一个选项。

[JavaScript] 纯文本查看 复制代码

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

[JavaScript] 纯文本查看 复制代码

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子也可以去（Sass中文文档）试试。
三、基本用法3.1 变量sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width。为什么选择$ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突。
sass变量的声明和css属性的声明很像：

[CSS] 纯文本查看 复制代码

$highlight-color: #F90;

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。这时变 量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。

[CSS] 纯文本查看 复制代码

$color : #1875e7; 

div {
    color : $color;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

[CSS] 纯文本查看 复制代码

$side : left;

.rounded {
    border-#{$side}-radius: 5px;
}

3.2 计算

[CSS] 纯文本查看 复制代码

$var: 10px;
div {
    margin: (28px/2);
    position: absolute;
    top: 30px + 20px;
    left: $var + 20px;
}

3.3 嵌套CSS 规则

在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

[CSS] 纯文本查看 复制代码

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

[CSS] 纯文本查看 复制代码

/* 编译后 */
#content article h1 { color: #333 };
#content article p { margin-bottom: 1.4em };
#content aside { background-color: #EEE };

属性也可以嵌套，比如border-color属性，可以写成：

[CSS] 纯文本查看 复制代码

p {
    border: {
        color: blue
    }
}

注意，border后面必须加上冒号。

在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方。

[CSS] 纯文本查看 复制代码

article a {
  color: blue;
  &:hover { color: red }
}

在为父级选择器添加:hover等伪类时，这种方式非常有用。同时父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。举例来说，当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下：

[CSS] 纯文本查看 复制代码

#content aside {
  color: red;
  body.ie & { color: green }
}

3.4 静默注释css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。
sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScript、Java等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

[CSS] 纯文本查看 复制代码

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

[CSS] 纯文本查看 复制代码

body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
  padding:  /* 这块注释内容也不会出现在生成的css中 */ 0;
}