<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sass的使用（混合和继承）</title>
<link rel="stylesheet" href="css/03style.css">
</head>
<body>
<!--sass继承@extend的使用-->
<div class="box"></div>
<div class="bg"></div>
<!--sass混合@mixin的使用-->
<div class="border-color"></div>
</body>
</html>@charset "utf-8";
//继承
.box{
width:100px;
height:100px;
border:3px solid #000000;
}
.bg{
@extend .box;//继承使用
background:yellow;
}
//混合声明
@mixin one($bordercolor:black,$w:100px,$h:100px){
width:$w;
height:$h;
border:3px solid $bordercolor;
}
//混合调用
.border-color{
@include one(red,200px,200px);
}结果：
