Sass-简介

概念

Sass 由 hampton catlin 设计，natalie weizenbaum 于 2006 年开发，它可以免费下载和使用。

Sass 是一个将脚本解析成 CSS 的脚本语言（SassScript），也是一款 CSS 预处理器，它减少了 CSS 的重复，也因此节省了时间。

Sass 是对 CSS3（层叠样式表）的语法的一种扩充 Sass，扩展了 CSS3，增加了规则、变量、混入、选择器、继承等属性，生成了良好的格式化 CSS 代码，便于代码的维护和组织。

功能

• 完全兼容 CSS 的所有版本
• 增加了变量、嵌套、混合等功能
• 通过函数进行颜色值与属性值的运算
• 提供了控制指令（control directives）
• 自定义输出格式

语法格式

Sass 有两种语法格式：SCSS（Sassy CSS，较新的语法）和缩进语法（最开始的叫法）。

前者支持大多数 CSS hacks 写法以及浏览器前缀写法，以及早期的 IE 滤镜写法，这种格式以 .scss 作为扩展名；后者简称 Sass，是一种简化格式，与 Haml 类似，使用缩进代替花括号来区分代码（属性表示某个选择器）并用换行代替分号分隔属性，用回车将不同规则分隔开，这样相对来说它比 SCSS 更容易阅读且书写也较为快速，它以 .sass 作为扩展名。

Sass 使用情况

浏览器是不理解 sass 代码的，因此我们将需要一个 sass 预处理器来将 sass 代码转换为标准 css，这个过程称为运输。所以，我们需要给一个 transpiler（某种程序）一些 sass 代码，然后得到一些 css 代码。

提示：transpiling 是一个术语，用于将用一种语言编写的源代码转换 / 翻译成另一种语言。

Sass 文件类型：Sass 文件的扩展名为 .scss。

Sass 评论：Sass 支持标准 CSS 注释 /*comment*/，此外还支持内联注释 //comment。

    /* 定义原色 */
    $defColor1: #f44586;
    $defColor2: green;
    
    /* 使用变量 */
    .main_use{background: $defColor2;  // 在这里我们可以设置内联注释}

增加特性

• 变量
  Sass 支持定义变量，变量以美元符号（$）作为开头，用冒号（:）赋值。
  支持四种数据类型：

  • 字符串
  • 数值
  • 布尔类型
  • 颜色

变量可以用作函数的参数或者是返回值，在解释的过程中，解释器会把变量的值写入最终的 CSS 文件中。

• 嵌套（Nesting）
  SCSS 支持嵌套并且支持代码块的嵌套（CSS 支持嵌套但不支持代码块的嵌套），它可以清晰的表示元素之间的关系。
• 导入（@import）
  Sass 支持 @import 指令，该指令允许我们将一个文件的内容包含在另一个文件中，该指令包含 CSS 文件，因此不需要额外的调用 HTTP，而由于性能问题，CSS 指令每次调用都会创建一个额外的 HTTP，在这里 Sass 就没有这样的问题。
• 混入（mixin）
  Mixin 包含一段合法 Sass 代码，类似于 C 语言的宏定义；解释器在调用 mixin 时会将它扩展成它所包含的完整 Sass 代码，可以有效的减少代码重复，从而写出的代码更加干净简洁。
• 继承（@extend）
  该指令允许我们将一组 CSS 属性从一个选择器共享到另一个选择器。