作者：一枝草一滴露的执着 | 来源：互联网 | 2023-02-01 14:47
我刚刚完成了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, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333; }
.success {
border-color: green; }
.error {
border-color: red; }
.warning {
border-color: yellow; }
/* mixin processed */
.success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: green; }
.error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: red; }
.warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: yellow; }
我的问题是这个功能有何不同？我什么时候应该使用另一个？
1> geo..：
这是从http://blog.nakulrajput.com/mixins-extends-and-placeholders/复制的:
@mixin
这是mixin的工作原理.定义和用法:
@mixin awesome {
width: 100%;
height: 100%;
}
body {
@include awesome;
}
p {
@include awesome;
}
上面的代码段产生以下代码.
body {
width: 100%;
height: 100%;
}
p {
width: 100%;
height: 100%;
}
为了让事情更有趣,我们可以让我们的mixin接受参数.更好的是,如果在没有参数的情况下调用mixin,我们可以定义默认值.
@mixin awesome($w: 100%, $h: 100%) {
width: $w;
height: $h;
}
body {
@include awesome(960px);
}
p {
@include awesome;
}
结果将类似,但身体的宽度是不同的.
body {
width: 960px;
height: 100%;
}
p {
width: 100%;
height: 100%;
}
如果你使用mixins,它们中的样式会在你的类中重复
如果您需要在最终输出中更改或计算某些内容,mixins非常有用.例如,如果需要将border-radius应用于多个元素.但是,在其他一些情况下,存在大量重复代码,如果使用@extend可以避免这些代码.
**@extend**
.awesome {
width: 100%;
height: 100%;
}
body {
@extend .awesome;
}
p {
@extend .awesome;
}
它是相似的,不是吗.在SASS中它看起来几乎相同,但在CSS中结果是:
.awesome, body, p {
width: 100%;
height: 100%;
}
使用mixin缩短版本.您无法在扩展期间传递参数,但实际上并不是这个想法.
@extend应该用在你想要在元素之间共享属性的那些地方.
京公网安备 11010802041100号