SASS - variables

_variables.scss

$sizeOfHeader: 28px;
$color: black;
$size: 16px;
$deger: 13px;

$color-red: red;
$color-yellow: yellow;

$header-color: $color-red;
$link-color: $color-yellow;

$gradient-color-first:  #370505;
$gradient-color-second: #ebe212;

styles.scss

@import "variables";
@import "mixins";

h1{
  font-size: $sizeOfHeader;
  color: $header-color;
}
h2{
  font-size: $sizeOfHeader - 7px;
  color: $header-color;
}
a {
  color: $link-color;
}

div {
  font-size: $size * 1;
  font-family: "Agency FB", sans-serif;
  color: $color;
  top: 10px;
  bottom: 30px;
  margin: 100px;
  padding: $deger;
  line-break: strict;
  line-height: 20%;
  border: 1px dashed $color;

  ul{
    li{
      text-align: center;
      font-family: Andalus, cursive;
      font-size: 30px;
      color:red;
      margin: 3px;
      padding-left: 3px;
      padding-right: 20px;
      bottom: 30px;
      top:2px;
    }
  }
}