***前面的文章，我们，讲解了less的框架应用规范，现在我又归类了一些scss的一些框架应用。
供大家参考学习！！！！***Sass 和 SCSS 其实是同一种东⻄西，我们平时都称之为 Sass，两者之间不不同之处有以下两点：
1.文件扩展名不不同，Sass 是以“.sass”后缀为扩展名，⽽而 SCSS 是以“.scss”后缀为扩展名
2.语法书写⽅方式不不同，Sass 是以严格的 缩进式 语法规则来书写，不不带⼤大括号 {} 和分号 ; ，而 SCSS的语法书写和 CSS 语法书写⽅方式类似，所以，我们接下来就主要以scss做技术分享，绝大多数，场景下，用户使用的，也都是scss。
首先创建变量
变量：
scss变量使用 “ $” 符号创建。
命名变量分为：
普通变量和默认变量
普通变量定义后，可以在全局范围内使用。
普通变量：
例子：
$root :red;
$root1:300px; //定义变量，样式名与样式值
$root2:300px;
.box {
width: $root1;
height: $root2;
background-color: $root;
}
//下面的选择器直接套用定义的变量，面向全局使用。
.box1 {
width: $root1;
height: $root2;
background-color: $root;
}默认变量：
注： 只需要在定义的变量值后面加上 !default ，就可以将它设置成默认变量 ，设置默认变量后，不影响后面继续设置的变量，只是在没有 设置的情况下，页面上默认使用该默认变量属性。
sass 的默认变量量⼀般是⽤用来设置默认值，然后根据需求来覆盖的，覆盖的方式只需要在默认变量之前重新声明下变量量即可。
例子：
$root :red !default;//定义了该变量默认属性
$root1:300px;
$root2:300px;
.box {
width: $root1;
height: $root2;
background-color: $root;
}
.box1 {
width: $root1;
height: $root2;
background-color: $root;
}变量的调用：
变量调用分为：全局变量和局部变量。
全局变量：例子：
$poty:200px;
$shool:300px; //定义全局变量
$root:pink;
.box4{
width: $poty;
height: $shool; //调用全局变量
background-color: $root;
}局部变量： 该变量和less一样，只能应用在box4属性范围内。
.box4{
$poty:200px;
$shool:300px; //定义局部变量，该变量和less一样，只能应用在box4属性范围内。
$root:pink;
$head:20px;
div{
width: $poty;
height: $shool; //调用局部变量
background-color: $root;
}
p{
margin-top: $head; //调用局部变量
}
a{
font-size: $head; //调用局部变量
}
}嵌套： 嵌套原理和 less 一样，同样，上面代码既是一个局部变量也是一个，嵌套结构的代码。
注：嵌套的结构必须依赖于 HTML 元素的嵌套关系的结构。
例子：
.box4{
$poty:200px;
$shool:300px;
$root:pink;
$head:20px;
div{
width: $poty;
height: $shool;
background-color: $root; //如图，box4中还嵌套了div，p，a三类元素，这种嵌套的结构，在输出的 css中会以后代选择器的形式呈现。
}
p{
margin-top: $head;
}
a{
font-size: $head;
}
}混合宏：
注：scss中，声明混合宏，前面必须要加上 “ @mixin” 创建。 代码原理和less的混入类似。
声明，混合宏：
@mixin ttg{
background-color: aqua;
width: 200px;
height: 300px;
} //@mixin 是⽤用来声明混合宏的关键词，ttg 是混合宏的名称，花括号里的是复⽤用的样式代码。调用混合宏:
注：使⽤用@mixin声明了了⼀个混合宏后，我们使用 @include 来调⽤用声明好的混合宏。
如下代码，我们设置好了一个拥有，宽高，背景颜色的属性变量， 然后为 box3元素直接调用设置好的变量名，这下，box3就直接有了宽高，背景颜色等属性。
@mixin ttg{
background-color: aqua;
width: 200px;
height: 300px;
}
.box3{
@include ttg;
}混合宏，传一个不带值的参数 和less类似，参考less！
@mixin name ($root,$shool,$text){
width: $root; //在混合宏"name"中定义了三个个不带任何数值的参数“$root,$shool,$text”
height: $shool
background-color: $text;
}
.box5{
@include name(200px, 300px,yellow ); //在调⽤时候给这个混合宏传一个参数值
}混合宏，传一个带数值的参数： 和 less传入默认值同理
注明：当我们在设置样式值的时候如果就给了默认样式值，那么，我们在调用的时候，就可以不用再输入样式值了，直接调用样式名，引用。
如下：
@mixin name ($root:200px,$shool:300px,$text:pink){
width: $root;
height: $shool;
background-color: $text;
}
.box5{
@include name
}但有时候，我们想要的值有变时，就还可以继续按照顺序，传入值，因为当默认值和传入值同时存在时，代码会就近原则，有选择传入的值。
如下：
注明：注意传入值的顺序，要传值的写在最前面，不传值的写在最后面，或者可以不写。 重要！！！！！
当传入值的值，和样式名默认带的值，同时存在时，，就近原则，优先执行传入的值！！！
@mixin name ($root:200px,$shool:300px,$text:pink){
width: $root;
height: $shool;
background-color: $text;
}
.box5{
@include name(400px,400px,yellow)//就近原则，优先执行此处值，此处的值，会覆盖掉上面的默认值
}扩展，继承： 通过关键词 “@extend” 来继承已存在的类样式块
如下图：我们为root1设置了宽高，背景属性，下面的元素，我们通过 @extend ，让它们完全继承root1的属性样式。这样一来，最后呈现的样式是和root1一样的。
.root1{
width: 200px;
height: 200px;
background-color: aqua;
}
.root2{
@extend.root1;
}
.root3{
@extend.root1;
}占位符： 占位符通过 % 关键词来创建。
%topp声明的代码如果不被 @extend 调⽤用的话，不会产⽣任何代码。取代从前CSS中的代码冗余的情形。
%topp{
margin-top: 80px;
background-color: rgb(172, 127, 255);
}
.root4{
width: 100px;
height: 100px;
@extend %topp;
}注：这段代码如果没有被 @extend 调⽤用，他并没有产⽣生任何代码块，只是静静的躺在你的某个 SCSS ⽂文件中。只有通过 @extend 调⽤用才会产⽣生代码：