scss应用

scss

vscode下载插件

// 定义变量  
$xxx:red;
// &:代表它的父级
.box{
    
    
   &:hover{
    
    
     color:red;
   }
}
// 嵌套
// 混入
@mixin fn($w){
    
    
  width:$w
}
.box{
    
    
   @include fn(100px);
}
// 继承
%border{
    
    
   border:1px solid red;
}
.box{
    
    
    @extend %border;
}

实例

$color:red;  // 定义变量

// 定义混入
@mixin setWH($w,$h){
    
    
   width:$w;
   height:$h;
}

// 定义继承
%border{
    
    
   border:10px solid pink;
}

.box{
    
    
   // 使用混入方法
    @include setWH(300px,200px);
    // 使用继承方法
    @extend %border;
    background-color: $color;
    &:hover{
    
    
        background-color: green;
    }
    &2{
    
    
        @include setWH(30px,20px);  
        background-color: #000; 
    }
}