Добавить префикс для каждого правила в SASS

Question

Мой проект использует vuetify и множество моих собственных стилей. Мои стили часто используют & несколько раз в объявлении стиля, например так:

.sis-sidebar {
  &__link {
    &.-active &-placeholder {
      color: #fff;
    }
  }
}

// Compiles to:

.sis-sidebar__link.-active .sis-sidebar__link-placeholder {
  color: #fff;
}

Для html все работает просто так:

<div class="sis-sidebar__link -active">
  <div class="sis-sidebar__link-placeholder">
    This one is white
  </div>
</div>

Я хочу все мои стили имеют больший приоритет, чем стили из фреймворка. Но я не хочу ничего менять внутри. Это файл css, который я пытаюсь изменить: Если я сделаю

@import 'framework';
#sis {
  @import 'my-styles';
}

// It compiles to:

#sis .is-sidebar__link.-active #sis .is-sidebar__link-placeholder {
  color: #fff;
}

// And I want it to be: 

#sis .is-sidebar__link.-active .is-sidebar__link-placeholder {
  color: #fff;
}

Возможно ли это сделать?

Answer 1

Вы можете сделать это следующим образом:

.sis-sidebar {
  &__link {
    #sis &.-active &-placeholder {
      color: #fff;
    }
  }
}

Вы также можете полностью избежать этой проблемы, используя переменные, например:

$sidebar-block: '.sis-sidebar';
$sidebar-element: '__link';

#sis {
  #{$sidebar-block + $sidebar-element}.-active #{$sidebar-block + $sidebar-element}-placeholder {
    color: #fff;
  }
}