一，sass（原版是英文）
sass是预处理针对css的强化处理工具----能更好的对css进行更好的维护（针对css的框架，有结构性便于查看）
针对css增加了变量，嵌套，混合，导入
提供控制指令（if for,each)等高级功能
1.1，语法格式
scss和sass（可以相互转换，推荐使用scss：对c3的语法上全部通用，支持大多数css写法以及浏览器的前缀写法。sass:被称为缩进格式使用缩进代替花括号，用换行代替分好哦的属性）
$ sass-contenvert style.sass style.scss
$ sass-contenvert style.scss style.sass
1.1.1变量
css引入了变量，可以反复使用css属性定义成变量，通过变量名来引用他们，sass使用$符号来定义变量
$with-color:pink
#div:frist-child{
background-color:$with
}
可以在变量里面引用其他变量
$with-color:pink
$het-border:1px solid $with-color
#div:frist-child{
background-color:$with-color;
border：$het-border;
}
注意：中划线和下划线是一样的都兼容，可识别
1.2嵌套
父选择器标识符&（可以放在任何选择器出现的地方，当包含父选择器表情师傅嵌套规则被打开是，他不会像后代选择器拼接，而是&被父选择器直接替代，加了&表示它变成了父级）
1.2.1群组选择器的嵌套
#div.h1,#div.h2,#div.h3{
background-color:gold;
}
#div{
.h1,.h2,.h3{background-color:gold};
}
#div.a,#div1.a{
color:pink
}
#div,#div1{
a{color:gold;}
}
1.2.2层次选择器（>子元素选择器,+相邻的兄弟元素，~同层全体选择器）
<style>
#level{
>div{
color: skyblue;
}
.brother +button{
list-style: none;
border: 1px solid blue;
}
p~p{
background-color: plum;
}
}
</style>
<body>
<div id="level">
<div>子元素选择器</div>
<div>子元素选择器</div>
<button class="brother">相邻兄弟元素选择器</button>
<button class="brother">相邻兄弟元素选择器</button>
<button class="brother">相邻兄弟元素选择器</button>
<p>同层次选择器</p>
<p>同层次选择器</p>
<p>同层次选择器</p>
</div>
</body>
1.3属性嵌套
ul li{
width：120px;
height: 80px;
font-size:20px;
font-family:"幼圆";
font-weight:800;
}
ul li{
width：120px;
height: 80px;
font:{
size:20px;
family:"幼圆";
weight:800;
}
}
二，sass中设置@import引入外部css文件
@import它允许在一个css文件中导入其他css文件
@import并不需要指明被导入文件的全名，只需要写文件名就可以了
sass局部文件（文件名是下划线开头的）
1.2默认变量值
当设置该属性为默认属性，如果有其他变量改变了该变量的值，那么该变量的值为被改变的值
1.3嵌套导入
在原生的css中使用@import，在css属性中导入在该属性，只在该属性中呈现不会影响到其他元素
1.3.1.被盗取的·文件名字以.css结尾
1.3.2.被导入文件的名字是一个URL地址
1.3.3.被导入文件的名字是css的url（）值
1.4静默注释
在sass中使用注释使用（/*。。。。*/),在sass中写的注释在对应的css文件中也是可以呈现的
总结：
1.安装：开发文档下载插件，写命令行（sass语言使用ruby语言开发的，所以下载前要先下载ruby）
2.变量
声明变量：要使用变量需要在变量名之前加$，之后：引用，（中划线和下划线都可以识别）
3.嵌套
3.1父选择器标识符&，把当前元素设置成父级
3.2群组选择器的嵌套
3.3层次选择器（>子元素选择器,+相邻的兄弟元素，~同层全体选择器）
3.4属性嵌套
4.@import引入其他css文件
4.1默认改变值
4.2嵌套导入
4.3静默注释
