What is the difference between a variable and a mixin in sass?

Question

I have been doing some googling and I currently understand the difference being that a variable stores a single line of information whereas, a mixin stores multiple lines of variables.

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

The above code is compiled to:

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