// 定义一个混合器
@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%); // 使用Sass的内置函数
}
// 其他属性
border: 1px solid #ddd;
border-radius: 5px;
// 嵌套选择器
.icon {
font-size: 20px;
margin-right: 5px;
}
}
// 使用混合器
.my-button {
@include custom-button(#3498db, #ffffff);
}
.another-button {
@include custom-button(#e74c3c, #ffffff);
font-weight: bold;
}
在上面的例子中,混合器custom-button包含了各种CSS规则,包括基本样式、嵌套规则、使用参数的动态规则等。在使用混合器的地方,通过@include关键字引入混合器,并传递相应的参数。
通过这种方式,你可以更灵活地定义混合器,使其适应不同的样式需求。混合器内的规则将根据使用时传递的参数动态生成。
转载请注明出处:http://www.zyzy.cn/article/detail/6180/SASS