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属性从一个选择器共享到另外一个选择器。