何时在Sass中使用@extend和@mixin

我在学习萨斯在official tutorial。何时在Sass中使用@extend和@mixin

当我学到@mixin和@extend时，我知道它们都是用于CSS代码重用，但我无法弄清楚何时使用哪一个。对我来说有两点不同。

@mixin可以接受的参数（但@extend不能？），这是很好的，它像一个功能。
@extend可以让你的输出CSS包含更少的代码，就像在这个官方教程中输出CSS (.message, .success, .error, .warning { })一样。

目前，我只知道，如果我想采取额外的论据，我将使用@mixin。如果我想要减少输出CSS代码，我将使用@extend。除了那两个，我可以选择其中一个来使用。我对么？

来源

2017-08-26 EntryLeveDeveloper

你是对的。

如果您希望输出根据您的调用方式而改变，您应该使用mixin。

因此，在某些情况下，使用%placeholder和@extend会产生更少的CSS。认识@extend创建关系很重要。无论何时使用@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%; 
}

但随着混入可以有参数，如：

@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指令不灵活。你无法将参数传递给它，所以那里有什么。在@media指令中使用@extend也存在限制，您无法使用@extend在不同的媒体指令中扩展选择器。

使用mixin的主要优势在于它们具有的强大功能和灵活性，因为它们可以接受参数。当然，如果你想传递参数，你必须选择@mixin而不是@extend。

它们是可以互换的，它也取决于你是否想要/不得不坚持干燥CSS。

EXTEND

%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选择器之间没有关系。

来源

2017-08-26 22:07:22 Alessio

感谢您的回答。但实际上，当我在其教程（http://sass-lang.com/guide）中学习'@mixin'和'@extend'时，我认为你的答案是一样的。除了我在文章中提到的两种情况外，我更关心何时使用哪一种。 – EntryLeveDeveloper

呃..我添加了一些更多的信息，让我知道如果你需要更深入的解释 – Alessio

非常感谢。您能否提供参考文件以获取您的附加信息？你添加的信息看起来像是我的两个案例在我的文章中的解释？除了我的两种情况外，你还有更多的信息吗？ – EntryLeveDeveloper

@extend扩展规则内部的规则实质上创建继承。

.button { 
    color: black; 
} 
.submit-button { 
    @extend .button; 
    border 1px black solid; 
}

结果：

.submit-button { 
    border: 1px black solid; 
} 
.button, .submit-button { 
    color: black; 
}

使用@extend当你想继承的规则

@mixin创建的代码重复的部分，更像是功能

@mixin large-font { 
    font: { 
    size: 14px; 
    family: san-serif; 
    weight: bold; 
    } 
} 

#form { 
    @include large-font; 
}

使用@mixin时你知道你会重复给自己很多。创建@mixin可帮助您避免这种情况。

来源

2017-08-26 22:30:23

何时在Sass中使用@extend和@mixin

回答

相关问题