注：scss文件代码必须对其进行编译为css代码文件
$red:#db221d;
// 变量
.box{
width: 100px;
height: 100px;
background-color: aqua;
// 嵌套
span{
color: aqua;
background-color: red;
}
}
h2{
color: $red;
}
button{
background-color: $red;
}
// 混入
@mixin btn ($a,$b,$c,$d,$e,$f){
width: $a;
height: $b;
background-color: $c;
color: $d;
font-size: $e;
border-radius: $f;
border: none;
}
.btn-info{
@include btn(120px,36px,#0d6efd,#fff,18px,3px)
}
.btn-1{
@include btn(100px,32px,#198754,#fff,16px,2px)
}
注：html代码文件中引入的css代码是scss编译后的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量</title>
<link rel="stylesheet" href="./2.css">
</head>
<body>
<div class="box">
<span>123</span>
</div>
<h2>标题二</h2>
<button>按钮</button>
<button class="btn-info">提交</button>
<button class="btn-1">登录</button>
</body>
</html>
扫一扫
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
