css - sass中的变量和mixin有什么区别？

Question

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

Answer 1

From the sass documentation

Variables begin with dollar signs, and are set like CSS properties. You can then refer to them in properties:

$width: 5em;

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

On the other hand, Mixins allow you to define styles that can be re-used throughout the stylesheet

@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; }