Sass

“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。在众多优秀的 CSS 预处理器语言中属Sass、LESS和Stylus最优秀.

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似

SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。

变量声明

Sass 中 用 $符号声明变量,如：
$width：100px;
使用变量，如：

div{
width:$width;
}

 

默认变量

sass 的默认变量仅需要在值后面加上 !default 即可。

$baseLineHeight:1.5 !default;

body{

    line-height: $baseLineHeight;

}

 

编译后的css代码：

body{

    line-height:1.5;

}

 

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖方式也很简单，只需要在默认变量之前重新声明下变量即可。 

$baseLineHeight: 2;

$baseLineHeight: 1.5 !default;

body{

    line-height: $baseLineHeight;

}

 

编译后的css代码：

body{

    line-height:2;

}

 

可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

Sass 的嵌套分为三种：

• 选择器嵌套
• 属性嵌套
• 伪类嵌套

 

[Sass]嵌套-选择器嵌套

 Sass 中，就可以使用选择器的嵌套来实现：

nav {

  a {

    color: red;

    header & {

      color:green;

    }

  } 

}

 

编译为相应的CSS：

nav a {

  color:red;

}

 

header nav a {

  color:green;

}

 

 

Sass 属性嵌套

CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。

在 Sass 中我们可以这样写：

.box {

  border: {

   top: 1px solid red;

   bottom: 1px solid green;

  }

}

编译后相应的CSS为：

.box {

    border-top: 1px solid red;

    border-bottom: 1px solid green;

}

 

[Sass]嵌套-伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用

例如：.

.box{

        &:before{             

/*伪类嵌套与属性嵌套的区别在与，这里必须加&，不能省略*/

         content:"伪元素嵌套";

  }

}

 

相应的CSS代码如下：

.box:before{

    content:"伪元素嵌套";

}