0xD34F

Вместо margin-bottom задавайте margin-top, и первым count элементам выставляйте 0:

margin-top: $margin;

@for $i from 1 through $count {
  &:nth-child(#{$i}) {
    margin-top: 0;
  }
}

.dropdown
    &__button:hover + &__content,
    &__content:hover
        display: block

.item
  margin-left: -450px
  @for $i from 1 through 6
    &:nth-child(#{$i})
      left: $i * 150% - 100%

Селектор неправильный, замените

&:hover + .block .circle-1

на

&:hover ~ .block .circle-1

Ну и для второго аналогично (да и для последнего тоже не помешает - ради единообразия).

UPD. А вообще, прописывать вручную стили для каждого элемента необходимости нет. Можно сложить цвета в список, и сделать по нему цикл:

.hover {
  ...

  .text {
    ...

    $hover-colors: red, green, blue;
    @for $i from 1 through length($hover-colors) {
      &:nth-child(#{$i}):hover ~ .block .circle:nth-child(#{$i}) {
        background: nth($hover-colors, $i);
      }
    }

Можно ли использовать `dashboard` селектор в `dashboard.scss`.

Нельзя.

Читайте документацию, так всё сказано:

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

&.facebook
    &::before
        background-color: #3b5998
    .fa
        color: #3b5998

Заменить на

&.facebook
    &::before
        background-color: #3b5998
    color: #3b5998

Аналогично и с остальными иконками.

Так:

#main-navbar {
  .dropdown-menu {
    .dropdown-item {
      &:active a {
        color: $navbar-dark-active-color;
      }
      ...

??