SCSS

1、什么是 Sass?

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

2、Sass 的功能特色

完全兼容 CSS3
在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
通过函数进行颜色值与属性值的运算
提供控制指令 (control directives)等高级功能
自定义输出格式

3、Sass 与 SCSS 的关系

（1）Sass 有两种语法格式。一种是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 “Sass”：
这是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。
这种格式以 .sass 作为拓展名。

（2）另一种是后来官方在 2010 年推出了一个全新的语法格式，叫做 SCSS (Sassy CSS) ：
这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。
此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。
这种格式以 .scss 作为拓展名。

4、基本用法

（1）嵌套

   1)、Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。
   nav {
        ul {
             margin: 0;
             padding: 0;
             list-style: none;
           }
       li { display: inline-block; }
     a {
           display: block;
           padding: 6px 12px;
           text-decoration: none;
      }
  }
  2）上面样式编译后产生的 CSS 代码如下：
  nav ul {
                margin: 0;
               padding: 0;
               list-style: none;
           } 
nav li {
               display: inline-block;
         } 
nav a {
       display: block;
       padding: 6px 12px;
        text-decoration: none;
     }

（2）变量 $

1）变量用来存储需要在 CSS 中复用的信息，例如颜色和字体。SASS 通过 $ 符号去声明一个变量。
$font-stack: Helvetica, sans-serif;
$primary-color: #333; 
body {
       font: 100% $font-stack;
       color: $primary-color;
 }
 2）编译后上面例子中变量 $font-stack 和 $primary-color 的值将会替换所有引用他们的位置。
 body {
     font: 100% Helvetica, sans-serif;
     color: #333;
}

（3）引入 @import

1）比如我们创建一个 foo.scss，里面定义了两个变量：
   $font-stack: Helvetica, sans-serif;
  $primary-color: #333;
2）在另一个 SASS 中可以使用 @import 引入这个 scss 片断：
  @import 'foo.scss';
     body {
         font: 100% $font-stack;
         color: $primary-color;
   }
3）编译后的最终 CSS 如下：
 body {
      font: 100% Helvetica, sans-serif;
      color: #333;
}

（4）混合 Mixin

混合（Mixin）用来分组那些需要在页面中复用的 CSS 声明，开发人员可以通过向 Mixin传递变量参数来让代码更
加灵活，该特性在添加浏览器兼容性前缀的时候非常有用。
1）SASS 目前使用 @mixin name 指令来定义混合，然后使用 @include name 指令引用混合样式。
  @mixin border-radius($radius) {
                                               border-radius: $radius;
                                           -ms-border-radius: $radius;
                                          -moz-border-radius: $radius;
                                       -webkit-border-radius: $radius;
                         }
    .box {
                @include border-radius(10px);
           }
2）最终编译的结果如下：
  .box {
        border-radius: 10px;
      -ms-border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
   }

（5）继承 @extend

继承是 SASS 中非常重要的一个特性，可以通过 @extend 指令在选择器之间复用 CSS 属性，
并且不会产生冗余的代码。
1）下面一个继承样例：
// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
       display: flex;
       flex-wrap: wrap;
   }
   // 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
  %message-common {
           border: 1px solid #ccc;
          padding: 10px;
         color: #333;
     } 
 .message {
        @extend %message-common;
     } 
  .success {
             @extend %message-common;
            border-color: green;
       } 
.error {
           @extend %message-common;
           border-color: red;
     } 
.warning {
      @extend %message-common;
       border-color: yellow;
 }
 
2）最终生成的 CSS 样式如下，可以发现该方式能够避免在 HTML 元素上书写多个 class 选择器：
.message, .success, .error, .warning {
        border: 1px solid #ccc;
        padding: 10px;
        color: #333;
} 
.success {
    border-color: green;
} 
.error {
        border-color: red;
}
.warning {
      border-color: yellow;
 }

（6）操作符

   所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式：
   数字运算：SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
   颜色值运算：颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。
   字符串运算：+ 可用于连接字符串。
   布尔运算：SassScript 支持布尔型的 and、or 以及 not 运算。
    函数：SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用。
    1）下面样例我们对宽度进行简单的计算：
        rticle[role="main"] {
          float: left;
        width: 600px / 960px * 100%;
    } 
   2）最终生成的 CSS 样式如下所示，可以看到 SASS 提供的算术运算符让开发人员可以更容易的将像素值转换为百分比：
    article[role="main"] {
         float: left;
         width: 62.5%;
    }

（7）父选择器 &

 Scss 使用"&"关键字在 CSS 规则中引用父级选择器：
          无论 CSS 规则嵌套的深度怎样，关键字"&"都会使用父级选择器级联替换全部其出现的位置。
         "&"必须出现在复合选择器开头的位置，后面再连接自定义的后缀。
1）下面是一个父选择器的使用样例：
         #main {
                   color: black;
               a {
                        font-weight: bold;
                      &:hover { color: red; }
                 }
           }
2）最终生成的 CSS 样式如下所示：
    #main {
           color: black;
     }
   #main a {
        font-weight: bold;
  } 
    #main a:hover {
          color: red;
   }

（8）嵌套属性

     CSS 许多属性都位于相同的命名空间（例如 font-family、font-size、font-weight 都位于 font 命名空间下），
     Scss 当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下。
     1）下面是一个书写嵌套属性的样例：
     .demo {
            // 命令空间后带有冒号:
           font: {
                   family: fantasy;
                  size: 30em;
                 weight: bold;
               }
         }
 2）最终生成的 CSS 样式如下所示：
     .demo {
            font-family: fantasy;
           font-size: 30em;
           font-weight: bold;
    }

（9）注释 /* */ 与 //

      Sass 除了支持标准的 CSS 多行注释 /* */，
      还提供了单行注释 //。前者会被完整输出到编译后的 CSS 文件中，而后者则不会。