sass的继承和混合使用

最新推荐文章于 2024-08-21 20:27:37 发布

夕阳下美了剪影

最新推荐文章于 2024-08-21 20:27:37 发布

阅读量3.5k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_38401285/article/details/80091883

版权

<!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>

scss:

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

结果：