Sass 快速入门

简介

Sass 是一门强大的CSS扩展语言。

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大。

特色功能

• 完全兼容 CSS3
• 在 CSS 基础上增加变量、嵌套 、混合、导入等功能
• 可以进行属性值的运算
• 提供控制指令等高级功能
• 自定义输出格式

语法格式

Sass 有两种语法格式：

• 首先是 SCSS (Sassy CSS) ，这种格式仅在CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。它以 .scss 作为文件的扩展名。
• 另一种是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) ，简称 Sass。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式。它以 .sass 作为文件的扩展名。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式：

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

如何使用 Sass

一般来说，使用 Sass 分三步：安装 Sass、编译 Sass 文件成 CSS 文件、在项目中引用 CSS 文件的路径。

安装 Sass

Sass 基于 Ruby 编写，所以安装 Sass 分两步：先安装 Ruby，再安装 Sass。

编译 Sass 文件成 CSS 文件

把 Sass 文件编译成 CSS 文件的方法大概有三种：

• 命令行编译（最基本的方法）

  sass style.scss style.css
  #把名为style的Sass文件转换为CSS文件。
  #每次有更新保存之后，都需要执行这个命令

• GUI编译工具

• 其他具有编译功能的插件或工具

Sass的主要用法

变量（Variables）

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

$width: 5em;

直接使用即调用变量：

#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。

嵌套

Sass 可以进行选择器的嵌套，表示层级关系。

// sass style
div {
    h1 {
        color: #333;
    }
    p {
        margin-bottom: 1.4px;
        a {
            color: #999;
        }
    }
}

编译后：

// css style
div h1 { color: #333; }
div p { margin-bottom: 1.4px; }
div p a { color: #999; }

导入

Sass 拓展了 @import 的功能，允许其导入 .scss 或 .sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 会寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

• 文件扩展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries。

如果不在上述情况内。文件的扩展名是 .scss 或 .sass，则导入成功；没有指定扩展名，Sass 将会试着寻找文件名相同，扩展名为 .scss 或 .sass 的文件将其导入。

@import "foo.scss";

或者

@import "foo";

都会导入 foo.scss 文件。

混合

混合包括 定义混合 和 引用混合 两个步骤。

Sass 中可用 @mixin 指令定义一些代码片段，且可设定参数，方便日后根据需求引用；引用混合采用 @include 指令 。从此，处理 css3 的前缀兼容变得轻松便捷。

• 定义混合。 @mixin 后跟名称和样式，可添加参数。
• 引用混合。 @include 后跟混合样式的名称，可传递参数。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

编译后：

//css style
//-----------------------------------
.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

继承

继承使用 @extend 指令，实现样式的组合。可使代码更加简洁。

//sass style
//-----------------------------------
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

编译后：

//css style
//-----------------------------------
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

运算

Sass 支持简单的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

p {
  width: 10px + 20px;
}

编译后：

p {
  width: 30px;
}

颜色

Sass 集成了大量的颜色函数，让变换颜色更加简单。

//sass style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}

编译后：

//css style
//-----------------------------------
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

控制指令

Sass 中的控制指令主要有 @if、@for、@each 和 @while 。

控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用，尤其是用在 Compass 等样式库中。