variables and extend scss

I also make sure I have a _variables.scss file, mainly for ease of editing, even if I have only a few variables. Remember to import this file at the top of your main SCSS file.
Note: z-index values should get stored in the variable file. By storing them in this file is not only best practice but allows you to create layers.
@extend
@extend can be used with a selector to pass the already defines styles to another selector.
a {
  color: rgb(255,212,84);
  display: list-item;
  text-decoration: none;
}
button {
  @extend a;
}
would compile to:
a, button {
  color: #ffd454;
  display: list-item;
  text-decoration: none;
}
Note: @extend will copy all instances of what is being extended, and not just exact matches.
This is best show through the following example:
$yellow-color: rgb(255,212,84);
$blue-color: rgb(66,134,244);
a {
  color: $yellow-color;
  display: list-item;
  text-decoration: none;

  &:hover {
   color: $blue-color;
  }

  &.link {
    border: 1px solid $yellow-color;
  }
}
div a {
  position: relative;
}
button {
  @extend a;
}
which will compile to:
a, button {
  color: #ffd454;
  display: list-item;
  text-decoration: none;
}
a:hover, button:hover {
  color: #4286f4;
}
a.link, button.link {
  border: 1px solid #ffd454;
}
div a, div button {
  position: relative;
}
Did you notice our use of variables too?