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:"伪元素嵌套";

}