我刚刚完成了sass 指南.该指南解释了mixins:
..A mixin允许您创建要在整个站点中重用的CSS声明组.您甚至可以传入值以使您的mixin更灵活.
和延伸:
..这是Sass最有用的功能之一.使用@extend可以将一组CSS属性从一个选择器共享到另一个选择器.
看起来'Extend'可以在'mixin'中实现(似乎'mixin'是'extend'的延伸:-)).
// @extend
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
// @mixin
@mixin message($color) {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: $color;
}
.success { @include message(green); }
.error { @include message(red); }
.warning { @include message(yellow); }甚至更多,因为混合有params.但另一方面,处理过的css并不完全相同.但它对DOM的风格效果会相同.
/* extend processed */
.message, .success, …