SCSS混合器的基础用法、继承，常见函数的基本使用

最新推荐文章于 2024-06-07 18:22:13 发布

云中的星星

最新推荐文章于 2024-06-07 18:22:13 发布

阅读量988

点赞数

文章标签： scss 前端 javascript

本文链接：https://blog.csdn.net/m0_61902288/article/details/125978771

版权

SCSS混合选择器

当你的代码中需要用到大段大段重用样式代码的时候，可以通过 SCSS 的混合器实现大段样式的重用。混合器使用@mixin 标识符定义。

给混合器传参：

混合器不一定总是生成相同的样式，可以通过@include 混合器时给混合器传参，来指定混合器生成的精确样式。当@include 混合器时，参数其实就是可以赋值给css 属性值的变量。

代码示例：

<body>
    <div class="div_0">
        <a href="#" class="nav">这是一个链接</a>
        <a href="#" class="list">这是一个链接</a>
    </div>
    <input type="button" value="文字" class="div_1">
    <input type="button" value="文字" class="div_2">
</body>


<!--SCSS-->
<!--混合器的定义: @mixin 混合的名称{代码}-->
<!--不带参数的混合器-->
@mixin a_0 {
        text-decoration: none;
        font-family: "微软雅黑";
        font-size: 18px;
        width: 200px;
        height: 50px;
    }
    .nav{
        color: red;
        display: inline-block;
        @include a_0();
    }
    .list{
        color: green;
        @includ