#前言

众所周知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.（节点）可嵌套性

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

代码如下（示例）：

复制`div{
wideth:100%;
height:80rpx;
p{
    color:red;
    }
}`

#2.变量

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

复制`$CSS_COLOR :red
div{
color:{$CSS_COLOR}
}`

#3.Mixins(混合@mixin)

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

注意点：

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

2.通过@include引用

代码如下（示例）：

复制`@mixin body{
    width:100%;
    color:red
    }
.html{
    @include body
}`

#4.@extend

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

复制`.body{
    width:100%;
    color:red
    }
.html{
    @extend .body
}`

#5.@function

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

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

#6.引用父元素&

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

复制`.body{
    width:100%;
    color:red
    }
&::child-add{
    background:blue
}`

#7.计算功能

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

复制`.body{
    width:20px + 50px;
    color:red 
    }
}`

#8.组合连接：#{}

变量连接字符串 $name:liang

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