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;
}
}