Expected behavior Overwriting Chips SCSS Variables affects Chips styling.

Actual behavior Currently in _chips-pro.scss there are two definitions of .chip, the second one commented with // Angular styles and without usage of variables.

first chip definition (with variables)

// Chips
.chip {
  display: inline-block;
  height: $chip-height;
  font-size: $chip-font-size;
  font-weight: $chip-font-weight;
  color: $chip-font-color;
  line-height: $chip-line-height;
  padding: 0 $chip-padding-right;
  border-radius: $chip-br;
  background-color: $chip-background-color;
  margin-bottom: $chip-margin-bottom;
  margin-right: $chip-margin-right;
  cursor: pointer;
  transition: $pagination-page-link-transition;

  &:hover {
    transition: $pagination-page-link-transition;
    background-color: $grey-lighten-2;
  }

  &:focus {
    transition: $pagination-page-link-transition;
    background-color: $grey-lighten-1;
  }

  &:active {
    transition: $pagination-page-link-transition;
    @extend .z-depth-1;
  }

  img {
    float: left;
    margin: 0 $chip-img-margin-right 0 $chip-img-margin-left;
    height: $chip-img-height;
    width: $chip-img-width;
    border-radius: 50%;
  }

  .close {
    cursor: pointer;
    float: right;
    font-size: $chip-close-font-size;
    line-height: $chip-close-line-height;
    padding-left: $chip-close-padding-left;
    transition: all 0.1s linear;
  }
}

Second definition without variables

// Angular styles
.chip {
  display: inline-block;
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  line-height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background-color: #eceff1;
  margin-bottom: 1rem;
  margin-right: 1rem;

  img {
    float: left;
    margin: 0 8px 0 -12px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
  }

  .close {
    cursor: pointer;
    float: right;
    font-size: 16px;
    line-height: 32px;
    padding-left: 8px;
    transition: all 0.1s linear;
  }
}

Is there a specific reason for this?