Question

我正在official tutorial中学习Sass。

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

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

目前，我只知道，如果我想采取额外的论点，我会使用@mixin。如果我想减少输出CSS代码，我将使用@extend。除了这两个，我可以选择任何一个使用。我是对的吗？

Answer 1

你是正确的。

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

因此，在某些情况下，使用%placeholder和@extend会产生较少的CSS。重要的是要意识到@extend会创建关系。无论何时使用@extend，您都要在样式表的其他位置移植选择器，以便与其他正在移植的选择器共享特征。

<强> EXTEND

e.g。

.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。

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

Answer 2

<div id="start">start</div> <div id="end">end</div> <div id="week">week</div> <button onclick="weekReset()">current</button> <button onclick="weekPlus(1)">add</button> <button onclick="weekPlus(-1)">substract</button>扩展规则内部的规则，实质上是创建继承。

@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可以帮助您避免这种情况。

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

2 个答案: