Sass（Sassy CSS）

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

特色

• 完全兼容 CSS3，在css3的基础上进行拓展

• 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能

• 通过函数进行颜色值与属性值的运算

• 提供控制指令 (control directives)等高级功能

• 自定义输出格式

功能拓展

嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

#main p {
  color: #00ff00;
  width: 97%;
​
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
​
//------等同于-------
​
#main p {
  color: #00ff00;
  width: 97%; }
#main p .redbox {
  background-color: #ff0000;
  color: #000000; }

@import嵌套指令

将制定css样式嵌套

//example.scss文件
.example {
  color: red;
}
​
//使用文件
@import 'example.scss'
#main{
    .....
}

不可以在混合指令（mixin）或控制指令（control directives）中嵌套@import

父选择器&

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
​
//------等同于-------
​
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

@extend继承指令

当一个元素使用的样式与另一个元素完全相同，，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。但是这样每次使用特殊样式的时候必须搭配通用样式，@extend可以避免上述情况，告诉Sass将一个选择器的所有样式继承给另一个选择器。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

上面代码的意思是将 .error 下的所有样式继承给 .seriousError，border-width: 3px; 是单独给 .seriousError 设定特殊样式，这样，使用 .seriousError 的地方可以不再使用 .error。

其他使用到 .error 的样式也会同样继承给 .seriousError，例如，另一个样式 .error.intrusion 使用了 hacked.png 做背景，也同样会使用 hacked.png 背景。

.error.intrusion {
  background-image: url("/image/hacked.png");
}

占位符选择器%foo

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。

当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中。

变量$

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;
//调用变量
#main {
  width: $width;
}
//变量也遵循作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global
​
#main {
  $width: 5em !global;
  width: $width;
}
​
#sidebar {
  width: $width;//width:5em;
}

数据类型

数字、字符串、颜色、布尔型、空值、数组（用空格或逗号作分隔符）和maps

混合指令（@import和@include）

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

//定义混合，@mixin后面加名称或样式
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
//引用混合样式@include
​