как изменить значение свойства navbar в boostrap s sass

Question

У меня есть навигационная панель на моей странице, которая имеет следующий CSS

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

Как мне изменить значение justify-content : start value?Когда я пишу изменения, используя SASS, это не работает.

styles.scss

.navbarChange{
    @extend .navbar;
    justify-content:start;
    display:inline-flex;
}

navbarChange m замена на navbar

как перезаписать свойство?Любая помощь приветствуется

обновлено: мои _variables.scss

.navbar
  { &.navbarChange
  {
    justify-content:start ;
    display:inline-flex;
 }
}

в моем html

<nav class="navbar navbarChange navbar-dark bg-dark ">
        <a class="navbar navbarChange" href="#">

, но это не работает.

я изменил свои стили. scss

@import "../node_modules/bootstrap/scss/bootstrap.scss";

 @import "variables";

Answer 1

Вместо использования !important для перезаписи свойств вы хотите сделать свои правила CSS более специфичными, чем загрузочные.Вместо того, чтобы указывать свойства в .navbarChange {}, рассмотрим селектор .navbar .navbarChange {}.

Подробнее о Специфичность CSS в MDN

Answer 2

Вы должны использовать !important, который переопределяет свойства.Нравится:

.navbarChange{
    @extend .navbar;
    justify-content: start!important;
    display: inline-flex;
}