// 定义一个带参数的混合器
@mixin custom-button($bg-color, $text-color) {
padding: 10px 20px;
font-size: 16px;
text-align: center;
cursor: pointer;
background-color: $bg-color;
color: $text-color;
&:hover {
background-color: darken($bg-color, 10%);
}
}
// 使用混合器并传递参数
.my-button {
@include custom-button(#3498db, #ffffff);
}
.another-button {
@include custom-button(#e74c3c, #ffffff);
}
在上面的例子中,custom-button混合器定义了两个参数 $bg-color 和 $text-color。在使用混合器的地方,通过@include关键字引入混合器,并传递相应的颜色参数。这样,你可以创建多个样式类,每个类都使用相同的混合器,但参数值不同。
这种参数传递的方式使得混合器可以更灵活地适应不同的设计需求。你可以根据具体情况传递不同的值,而不需要为每种情况都创建一个新的混合器。
转载请注明出处:http://www.zyzy.cn/article/detail/6181/SASS