作者:mobiledu2502861377 | 来源:互联网 | 2023-01-21 12:05
我在官方教程中学习Sass .
当我学习@mixin
并且@extend
,我知道它们都是用于CSS代码重用,但我无法弄清楚何时使用哪一个.对我来说有两点不同.
@mixin
可以接受参数(但@extend
不能?),这很好,它就像一个函数.
@extend
可以使你的输出CSS包含更少的代码,就像(.message, .success, .error, .warning { })
其官方教程中的输出CSS一样.
目前,我只知道,如果我想采取额外的论点,我会使用@mixin
.如果我想减少输出CSS代码,我会使用@extend
.除了这两个,我可以选择任何一个使用.我对么?
1> Alessio..:
你是正确的方式.
当您希望输出根据您的调用方式改变时,您应该使用mixin.
因此,在某些情况下使用a %placeholder
并且@extend
会产生较少的CSS.重要的是要意识到@extend会创建关系.无论何时使用@extend
,您都要在样式表的其他位置移植选择器,以便与其他正在移植的选择器共享特征.
延伸
例如
.awesome {
width: 100%;
height: 100%;
}
body {
@extend .awesome;
}
p {
@extend .awesome;
}
哪个回报:
.awesome, body, p {
width: 100%;
height: 100%;
}
MIXIN
@mixin awesome {
width: 100%;
height: 100%;
}
body {
@include awesome;
}
p {
@include awesome;
}
将返回:
body {
width: 100%;
height: 100%;
}
p {
width: 100%;
height: 100%;
}
但是对于mixins,您可以使用以下参数:
@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%;
}
希望这有用!
额外:
该@extend
指令不灵活.你不能将参数传递给它,所以那里有什么.使用@extend
内部@media
指令也有一些限制,您无法使用不同的媒体指令扩展选择器@extend
.
使用mixins的主要优点是它们具有的功能和灵活性,因为它们可以接受参数.当然,如果你想传递参数,你必须选择@mixin
结束@extend
.
它们是可以互换的,它还取决于你是否想要/必须坚持使用DRY CSS.
延伸
%hide-text {
text-indent: -9999px;
overflow: hidden;
}
.foo {
@extend %hide-text;
}
.bar {
@extend %hide-text;
}
.baz {
@extend %hide-text;
}
干净整洁的结果:
.foo, .bar, .baz {
text-indent: -9999px;
overflow: hidden;
}
MIXIN
@mixin hide-text {
text-indent: -9999px;
overflow: hidden;
}
.foo {
@include hide-text;
}
.bar {
@include hide-text;
}
.baz {
@include hide-text;
}
结果:
.foo {
text-indent: -9999px;
overflow: hidden;
}
.bar {
text-indent: -9999px;
overflow: hidden;
}
.baz {
text-indent: -9999px;
overflow: hidden;
}
你可以看到CSS选择器之间没有关系.