【CSS代码工程化】SCSS 框架应用规则

    ***前面的文章，我们，讲解了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 调⽤用才会产⽣生代码：