Sass中变量和mixin有什么区别？

Question

我进行了一些谷歌搜索，目前我理解的区别是变量存储单行信息，而混合存储多行变量。

- jose tanaka

Answer 1

来自Sass文档

变量以美元符号开头，并像CSS属性一样设置。然后您可以在属性中引用它们：

$width: 5em;

#main {
  width: $width; // width is set as 5em
}

另一方面，Mixins允许您定义可以在整个样式表中重复使用的样式。

@mixin large-text { // defining mixing
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title { // applying mixin
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

上述代码编译后得到以下结果：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

- user4447799

Answer 2

如果您了解C++或其他编程语言，那么您可以将Sass变量视为C或C++的全局变量，将Sass mixin视为C或C++的函数。

Mixin执行某种样式，可以在整个样式中重复使用，同样，您可以尽可能多地使用变量。

- ExploreNav

---

函数和混合（Mixin）是不同的。一个返回值，而另一个则像宏一样用于替换。 - user7926048

我知道它们是不同的，但我只是想帮助他理解基本概念。我们可以将它们联系起来，因为混合（mixins）和函数都需要参数和形参，并且都涉及某种类型的样式和功能。 - ExploreNav