前言

众所周知css并不能算是一门真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。

sass是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails 的大力推动，逐渐被更多开发者使用。

sass是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早成熟css预处理语言。最初它是为了配合haml而设计的，因此有着和haml一样的缩进式风格。

sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss

一、sass与scss的区别：（其实是一种东西）

1. scss是sass3引入的新语法，语法完全兼容css3， 继承了sass的功能

2. scss和sass大部分语法相同，唯一不同的是，scss需要使用分号和花括号，sass是以严格的缩进式语法缩写—换行和缩进

3. 文件扩展名不同

二、八大特性

1.（节点）可嵌套性

类似于标签节点可进行嵌套，使之整体为树形结构。

代码如下（示例）：

复制 1`div{
 2wideth:100%;
 3height:80rpx;
 4p{
 5    color:red;
 6    }
 7}`

2.变量

变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似js里的变量） 代码如下（示例）：

复制 1`$CSS_COLOR :red
 2div{
 3color:{$CSS_COLOR}
 4}`

3.Mixins(混合@mixin)

可重用性高，可以注入任何东西

注意点：

1.可以相互调用，但是不能拿自己调用自己，形成递归

2.通过@include引用

代码如下（示例）：

复制 1`@mixin body{
 2    width:100%;
 3    color:red
 4    }
 5.html{
 6    @include body
 7}`

4.@extend

允许一个选择器继承另一个选择器类,似于java中的类继承，一个类可以继承另一个类的方法。

复制 1`.body{
 2    width:100%;
 3    color:red
 4    }
 5.html{
 6    @extend .body
 7}`

5.@function

函数功能，用户使用@function可以去编写自己的函数 使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容

复制 1`@function send($a){
 2    @return $a*2
 3    }
 4.cacl{
 5    width:60 + {send(50)}px
 6}`

6.引用父元素&

在编译时，&将被替换成父选择符

复制 1`.body{
 2    width:100%;
 3    color:red
 4    }
 5&::child-add{
 6    background:blue
 7}`

7.计算功能

可以进行简单的加减乘除运算

复制 1`.body{
 2    width:20px + 50px;
 3    color:red 
 4    }
 5}`

8.组合连接：#{}

变量连接字符串 $name:liang

body .#{$liang}{ color:red }