1.sass和scss的关系

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。
两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。
而scss则和css的规范是一致的。

 2.用法

2.1注释

        多行注释 - 这些使用 /**/ 写入。多行注释都保留在CSS输出。
        单行注释 - 这些是使用 // 跟着注释。单行注释不会保留在CSS输出。

 2.2变量

$ 符号来标识变量；把反复使用的css属性值定义成变量；

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 变量中可存在变量

$link-color: blue;
a {
  color: $link_color; // 中划线和下划线等价，包括对混合器和Sass函数的命名
}

$side : left;
.rounded {
  border-#{$side}-radius: 5px; // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
}

$nav-color: #F90;// 当前样式表都可以使用
nav {
  $width: 100px; // 只有nav{}里面才可以使用，当前样式表其他地方可以重复定义和使用
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}
 

2.3 嵌套

选择器嵌套
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

属性也可以嵌套，比如border-color属性，可以写成：
p {
    border: {   // 注意，border后面必须加上冒号。
        color: red;
    }
}

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成
a {
    &:hover { color: #ffb3ff; } }
 

 2.4计算功能

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

数字运算: 支持数字的加减乘除、取整等运算 (+, -, *, /, %)
$var: 20px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;}

字符串运算： + 可用于连接字符串
注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，
相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号
p {cursor: e + -resize;} //编译后 p {cursor: e-resize; }
p:before { 
    content: "Foo " + Bar;  
    font-family: sans- + "serif";}
// 编译为
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }
 

2.5继承

继承是基于类class的（有时是基于其他类型的选择器）
允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;}

// class2要继承class1，就要使用@extend命令：

.class2 {
     @extend .class1;
     font-size:120%;
 }
 

 2.6Mixin

   // 使用@mixin命令，定义一个代码块。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
    //使用@include命令，调用这个mixin。
　　div {
　　　　@include left;
　　}
　　
　　// mixin的强大之处，在于可以指定参数和缺省值。
　　@mixin left($value: 10px) {
　　    float: left;
　　    margin-right: $value;
　　}
    // 使用的时候，根据需要加入参数：
　　div {
　　　　@include left(20px);
　　}

 2.7导入文件

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

    @import "foo.scss"; //都会导入文件 foo.scss
    @import "foo"; //都会导入文件 foo.scss
    @import "http://foo.com/bar";  // 插入外部文件
    @import "foo.css"; // 等同于css的import命令。
    

2.8高级用法

比如控制指令，条件语句、循环语句、自定义函数等 。

 

3总结

这里只是简单介绍 scss 最基本部分,使用 scss 可以编写清晰、无冗余、语义化的 css。

变量是 scss 提供的最基本的工具。通过变量可以让独立的 css 值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。

变量、混合器的命名甚至 scss 的文件名，可以互换通用_和-。

同样基础的是 scss 的嵌套机制。嵌套允许css规则内嵌套css规则，减少重复编写常用的选择器，同时让样式表的结构一眼望去更加清晰。scss同时提供了特殊的父选择器标识符 & ，通过它可以构造出更高效的嵌套。

混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。使用混合器减少重复，使用混合器让你的css变得更加可维护和语义化。

与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系，通过这些关系可以保持你的css的整洁和可维护性。

样式导入，scss 的另一个重要特性。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件，避免了项目中有大量的css文件通过原生的css @import带来的性能问题。通过嵌套导入和默认变量值，导入可以构建更强有力的、可定制的样式。