scss基础语法

scss基础语法

1. 变量

 // 使用scss 语法 声明一个变量 设置高度
 $width:500px;
 ​
 // 使用scss 语法 声明一个变量  设置字体颜色
 $color:red;

2. 嵌套

 // 嵌套的层级必须和 html 嵌套的层级一样
 div{
     height:500px;
     h1{
         background:green;
     }
 }

对应的html嵌套结构

 <div>
     <h1>
         标题
     </h1>
 ​
 </div>

3.伪类写法

 .container{
     height: 100px;
     width: 100px;
     background-color: red;
     font-size: 20px;
     color: blue;
 ​
     &:hover{
        color: green;
     }
 }

对应的html结构

 <div class="container">
     标题
 </div>

3. 混合器

3.1. 混合器不传递参数的形式

 // 定义一个混合器  不传递参数的形式
 @mixin  btn {
     width: 120px;
     height: 50px;
     border-radius: 5px;
     background-color: skyblue;
     border: none;
 }
 .btn1{
     color: red;
     @include btn;
 }

对应的html结构

 <button class="btn1">按钮</button>

3.2. 混合器传递参数的形式

 // 定义一个混合器 传递参数的形式
 @mixin  btn($w,$bg) {
     width: $w;
     height: 50px;
     border-radius: 5px;
     background-color: $bg;
     border: none; 
 }
 ​
 .btn1{
     color: red;
     @include btn(150px,green);
 }

对应的html结构

<button class="btn1">按钮</button>

3.3. 定义一个混合器 传递参数的行形式

// 定义一个混合器  默认参数的形式
@mixin  btn($w:120px,$bg:orange) {
    width: $w;
    height: 50px;
    border-radius: 5px;
    background-color: $bg;
    border: none;
}

.btn1{
    color: red;
    @include btn();
}

对应的html结构

<button class="btn1">按钮</button>

4. 继承

// 继承
.btn {
    width: 200px;
    height: 50px;
    border-radius: 5px;
    background-color:green;
    border: none;
}
.btn1{
    @extend .btn;
    color: red;
}
.btn2{
    @extend .btn;
    color: orange;
}

对应的html结构

<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>

\